0

我正在尝试使用 API 连接到 USDA Food Central 数据库。

let uri = encodeURI(`https://api.nal.usda.gov/fdc/v1/foods/search?api_key=${MY_API_KEY}&query=${search}`)

我想使用 API 来映射某些字段。

class AddFoodItemList extends Component {
  static contextType = AddFoodContext;
  render() {
    const listItems = this.context.FoodSearch.map((foods) =>
      <FoodItem
        key={foods.brandOwner}
        brandOwner={foods.brandOwner}
        fdcId={foods.fdcId}
      />
    );

    return (
      <div id="AddFoodItemList">
        {listItems}
      </div>
    );
  }

}

export default AddFoodItemList;

返回的 JSON 是附加的屏幕截图： 返回的 JSON

我收到一个错误，TypeError: Cannot read property 'map' of undefined。你认为为什么会这样？任何形式的帮助或建议表示赞赏！

4

1 回答 1

0

您正在尝试访问基于FoodSearch您的提供者价值的属性AddFoodContext。错误告诉你这个属性是undefined. 如果object屏幕截图中的value是您的上下文，那么您想要访问该属性foods。这是一个array其元素是具有属性brandOwner和的对象fdcId。

在你第一次渲染时，这个数据现在可能已经加载了，所以你应该默认为一个空数组 if foodsis undefined。

老实说，自从我像您那样在类组件中使用上下文以来已经有很长时间了。代码风格非常过时。使用useContext钩子访问值怎么样？

const AddFoodItemList = () => {
  const contextValue = useContext(AddFoodContext);
  console.log(contextValue);

  const listItems = (contextValue.foods || []).map((foods) => (
    <FoodItem
      key={foods.fdcId} // brandOwner isn't unique
      brandOwner={foods.brandOwner}
      fdcId={foods.fdcId}
    />
  ));

  return <div id="AddFoodItemList">{listItems}</div>;
};

这是一个完整的代码 - Code Sandbox Link

const MY_API_KEY = "DEMO_KEY"; // can replace with your actual key

const getUri = (search) => `https://api.nal.usda.gov/fdc/v1/foods/search?api_key=${MY_API_KEY}&query=${encodeURIComponent(search)}`;

const AddFoodContext = createContext({});

const FoodItem = ({ brandOwner, fdcId }) => {
  return (
    <div>
      <span>{fdcId}</span> - <span>{brandOwner}</span>
    </div>
  );
};

const AddFoodItemList = () => {
  const contextValue = useContext(AddFoodContext);
  console.log(contextValue);

  const listItems = (contextValue.foods || []).map((foods) => (
    <FoodItem
      key={foods.fdcId} // brandOwner isn't unique
      brandOwner={foods.brandOwner}
      fdcId={foods.fdcId}
    />
  ));

  return <div id="AddFoodItemList">{listItems}</div>;
};

export default () => {
  const [data, setData] = useState({});

  useEffect(() => {
    fetch(getUri("cheese"))
      .then((res) => res.json())
      .then(setData)
      .catch(console.error);
  }, []);

  return (
    <AddFoodContext.Provider value={data}>
      <AddFoodItemList />
    </AddFoodContext.Provider>
  );
};
于 2021-04-05T03:04:07.367 回答