从 JSON 获取请求映射。不明确的答案

【问题标题】：Mapping from JSON Get Request. Undefined从 JSON 获取请求映射。不明确的
【发布时间】：2021-06-30 21:40:07
【问题描述】：

我正在尝试使用 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 是附加的截图： Returned JSON

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

【问题讨论】：

这意味着您的上下文没有属性FoodSearch 或属性FoodSearch 具有值undefined。如果没有看到您如何将值传递给上下文提供程序，我无法调试它。
这能回答你的问题吗？ Cannot read property 'map' of undefined

标签： json reactjs jsx usda-fooddata-central-api

【解决方案1】：

您正试图访问您的 AddFoodContext 提供程序值上的属性 FoodSearch。错误告诉你这个属性是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>
  );
};

【讨论】：