Question

嘿，我有以下来自 api 的数据

0: {uuid: "a087b443-7af9-4464-8fd1-fb487fc60f66", name: "abc 19",}
1: {uuid: "baeb9282-84e9-4a72-b4e1-3a0ca6db7020", name: "abc 9", }

基本上它是一个数组。现在我有这样的初始数据

[
    { id: 1, storeName: "Store First", toAdd: true },
  ]

现在我想使用 setState 钩子将来自 api 的数据推送到初始状态。

这就是我所做的。

我使用 useEffect 调用 api。该函数是在 useEffect 之外声明的。在该函数中，我尝试了 prevState，但它正在推送这样的数据。

0: {id: 1, storeName: "Store First", toAdd: true}
1: (2) [{…}, {…}]
2: (2) [{…}, {…}]

以下是我使用的代码

 const [list, setList] = useState([
    { id: 1, storeName: "Store First", toAdd: true },
  ]);


const getdata = async () => {
   
    const { response } = await api.getdata(); // This give the following response
     =========
     0: {uuid: "a087b443-7af9-4464-8fd1-fb487fc60f66", name: "abc 19",}
     1: {uuid: "baeb9282-84e9-4a72-b4e1-3a0ca6db7020", name: "abc 9", }
     =========
     ////

    setStoreList((prevstate) => [...prevstate, response]); //This set the following 
    =========
    0: {id: 1, storeName: "Store First", toAdd: true}
    1: (2) [{…}, {…}]
    2: (2) [{…}, {…}]
    =========
  };

    //Use Effect to call the function
     useEffect(() => {
        getdata();
      }, []);

我真正想要的

0: {id: 1, storeName: "Store First", toAdd: true}
1: {uuid: "a087b443-7af9-4464-8fd1-fb487fc60f66", name: "abc 19",}
2: {uuid: "baeb9282-84e9-4a72-b4e1-3a0ca6db7020", name: "abc 9", }

对象数组，以便我可以映射。

Answer 1

我认为您的问题是您没有传播响应数组，请尝试替换：

setStoreList((prevstate) => [...prevstate, response]); //This set the following

与

setStoreList((prevstate) => [...prevstate, ...response]); //This set the following

由于您没有进行传播，因此每次运行钩子时，它都会将响应数组附加到 prevState。

Answer 2

这里有两种方法：-

使用 concat :-

AndroidManifest.xml;

setStoreList((prevstate) => prevState.concat(response)) 帮助您加入 concat 和 prevState 数组并获得一个新数组。

使用点差 :-

response;

spread 操作符让所有 iterable 内容就地展开，因此您对 setStoreList((prevstate) => [...prevstate, ...response]) 执行正确但忘记为 {{1} 执行此操作} 也是一个 prevState，因此是一个 iterable。

Answer 3

ES6：setStoreList((prev) => [...prev, ...res])
或者基本上：setStoreList((prev) => prev.concat(res))

使用initalstate更新react钩子中的状态

3 个答案: