React - prop .isRequired

Question

我收到了这个警告

道具类型失败:道具queryObjState.isRequired在RefineSearchBar中被标记为required，但其值为undefined。

为什么需要这个道具，我在propTypes中没有isRequired。

任何帮助都是最好的，谢谢！

export default function RefineSearchBar({ travelAdvisorApi, queryObjState }) {
  const dispatch = useDispatch();
  const [formData, setFormData] = useState({
    location: '',
    coordinates: {
      latitude: 0,
      longitude: 0,
    },
    radius: 5,
    priceLevel: '',
  });
  console.log(queryObjState);
  const setLocationResponse = (location, coordinates, radius = 5) => {
    setFormData((prev) => ({
      ...prev, location, coordinates, radius,
    }));
  };
  const submitForm = () => {
    if (!formData.coordinates.latitude && !formData.coordinates.longitude) {
      return;
    }
    dispatch(setSearchQueries(formData));
    travelAdvisorApi(formData);
  };

  return (
    <div className="sidebar w-100 d-flex justify-content-evenly align-items-start py-2">
      <HandleAutocomplete
        setLocationResponse={setLocationResponse}
        queryLocation={queryObjState.location}
      />
      <Container fluid>
        <Button type="button" onClick={submitForm}>
          Refine Search
        </Button>
      </Container>
    </div>
  );
}

RefineSearchBar.propTypes = {
  travelAdvisorApi: PropTypes.func.isRequired,
  queryObjState: PropTypes.shape(PropTypes.any),
};
RefineSearchBar.defaultProps = {
  queryObjState: {
    location: '',
    coordinates: {
      latitude: 0,
      longitude: 0,
    },
    radius: 5,
    priceLevel: '',
  },
};

Answer 1

根据to this issue in prop-types的说法，当您向PropTypes.shape(...)传递除javascript对象之外的任何对象时，都会出现错误。

您可以直接使用PropTypes.any省略它

RefineSearchBar.propTypes = {
  travelAdvisorApi: PropTypes.func.isRequired,
  queryObjState: PropTypes.any,
};

但是，如果您希望正确定义prop，则必须为PropTypes.shape提供一个有效的javascript对象，每个子属性都具有该对象，并使用PropTypes对其进行验证

RefineSearchBar.propTypes = {
  travelAdvisorApi: PropTypes.func.isRequired,
  queryObjState: PropTypes.shape({
    location: PropTypes.string,
    coordinates: PropTypes.shape({
      latitude: PropTypes.number,
      longitude: PropTypes.number,
    }),
    radius: PropTypes.number,
    priceLevel: PropTypes.string,
  }),
};