从 JSON Get 请求映射不明确的

如何解决从 JSON Get 请求映射不明确的

我正在尝试使用 API 连接到美国农业部食品中心数据库。

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 是附上的截图： Returned JSON

我收到一个错误，类型错误：无法读取未定义的属性“地图”。你认为为什么会这样？任何形式的帮助或建议表示赞赏！

解决方法

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

在您第一次渲染时，此数据现在可能已加载，因此如果 foods 为 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>
  );
};