React - 道具 .isRequired

Question

我收到此警告

失败的道具类型：道具queryObjState.isRequired在RefineSearchBar中被标记为必需，但其值为undefined。

为什么需要prop，我在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，当您将 javascript 对象以外的任何对象传递给 PropTypes.shape(...) 时，就会出现错误。

可以直接用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,
  }),
};

React - 道具 .isRequired

React - prop .isRequired

reactjs

react-proptypes