如何显示获取的对象数组并将多个获取的数组保存到状态？

Question

如果我尝试在地图功能内显示

user.meniu.pret

，它不会显示任何内容。

user.meniu[0].pret

显示值，但不会给我我想要的最终结果

我如何获取数据并在response.menu中显示值？

function App() {
  const [users, setUsers] = useState();
  const [meniu, setMeniu] = useState()

  const getApiData = async () => {
    const response = await fetch(
      "https://vercelfastfoodapi.vercel.app/fastfood/"
    ).then((response) => response.json());

    setUsers(response);

    setMeniu(response[1].meniu)  // <----------- SAVES VALUES
    setMeniu(response.meniu) // <------------ UNDEFINED

  };

  useEffect(() => {
    getApiData();
  }, []);

  return (
    <div className="App">

 {users &&
        users.map((user) => (
          <div className="item-container" key={user._id}>
            Id: <b> {user.restaurant} </b>  <br/>
            Restaurant: {user.meniu.pret} // <------- WONT DISPLAY ANYTHING. user.meniu[0].pret works fine

          </div>
        ))} 


          <button onClick={() => console.log(meniu)}>aaaa </button>
    </div>
  );
}

Answer 1

user.meniu

是一个数组而不是一个对象。这就是为什么

user.meniu.pret

为您提供 undefined 而

user.meniu[0].pret

让您访问数组

pret

的第一个对象的属性

user.meniu

的原因。 现在，如果您想将所有获取的 menius 保存在您可以执行的状态中：

setMeniu(response.map(r => r.meniu)); // remember that the meniu state now will be an array of objects

现在，如果您想显示数组中每个对象的所有 pret 值，您可以简单地执行以下操作：

<div className="item-container" key={user._id}>
 Id: <b> {user.restaurant} </b>  <br/>
 Restaurant: {meniu.map(m => m.priet)}
</div>

或者如果你想使用 user 对象，你可以这样做：

<div className="item-container" key={user._id}>
 Id: <b> {user.restaurant} </b>  <br/>
 Restaurant: {user.meniu.map(m => m.priet)}
</div>