javascript - 使用 useState 存储对象数组的状态

Question

我正在处理反应并从这里获取数据，https://jsonplaceholder.typicode.com/users。这将返回一个对象数组，我希望将其存储在我的 useState 挂钩中。我现在尝试的是这样的：

import React, { useState, useEffect } from "react";

const UserList = () => {
  const [data, setData] = useState([
    {
      id: "",
      email: "",
      website: "",
      phone: "",
      name: ""
    }
  ]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((json) => {
        console.log(json);
        json.map((object) => {
          setData((data) => [
            ...data,
            {
              id: object.id,
              email: object.email,
              website: object.website,
              phone: object.phone,
              name: object.name
            }
          ]);
        });
      });
  }, []);

  return (
    <>
      <div>
        <ul>
          {data.map((info) => {
            <li key = {info.id}></li>;
          })}
        </ul>
      </div>
    </>
  );
};

export default UserList;

我觉得我在使用扩展运算符存储数据时犯了一些错误，因为 console.log 显示。当我在 data.map 函数中放置一个 console.log(info) 时，它会不断重复这十个对象。我有点不确定这部分代码到底是如何工作的，所以如果有人可以提供任何建议或任何有用的东西。

标签： javascriptreactjsreact-hooks

Answer 1

删除json.map并放置此代码

setData((data) => [
  ...data,
  ...json.map(({id, email, website, phone, name}) => ({
    id,
    email,
    website,
    phone,
    name
  })),
]);