0

我正在尝试将对象更新为嵌套数组，当我尝试使用 React Hooks 时，下面的代码运行良好，使用 useState 来更新状态。

然后我尝试添加一个名为 Recoil 的状态管理库，这是一个来自 Facebook 的新库，它超级简单，行为类似于 Hooks。

但是在我更改了代码添加了一些 Recoil 代码后，比如 atom，useRecoilState，向嵌套数组添加一个新对象就停止了工作。

我尝试了几种不同的方法来解决这个问题并找到其他解决方案，但效果不佳。

有谁知道如何解决这个问题？您可以检查下面的代码和代码框链接。

https://codesandbox.io/s/nested-arrays-qrw95?file=/src/App.js:0-1547

import React from "react";
import { RecoilRoot, atom, useRecoilState } from "recoil";

const todoListState = atom({
  key: "TodoList",
  default: [
    {
      name: "Lee",
      device: [
        { name: "MBPR", price: 3000 },
        { name: "MBA", price: 2000 }
      ]
    }
  ]
});

export function TodoApp() {
  const [list, setList] = useRecoilState(todoListState);

  return (
    <>
      {list.map((x, i) => {
        return (
          <div style={{ border: "1px solid black", textAlign: "left" }} key={i}>
            <div>{x.name}</div>
            <div>Devices</div>
            <ul>
              {x.device.map((y, j) => {
                return (
                  <>
                    <li key={j}>{y.name}</li>
                  </>
                );
              })}
            </ul>
            <button
              onClick={() => {
                const clone = [...list];
                clone[i].device = [...clone[i].device, { name: "IPX" }];
                setList(clone);
              }}
            >
              Add List
            </button>
          </div>
        );
      })}
      <button
        onClick={() => {
          const newData = { name: "Kristoffer", device: [{ name: "Nokia" }] };
          setList([...list, newData]);
        }}
      >
        Add Item
      </button>
    </>
  );
}

export default function App() {
  return (
    <RecoilRoot>
      <div className="App">
        <TodoApp />
      </div>
    </RecoilRoot>
  );
}
4

0 回答 0