更新存储在 Recoil js 中的 objects 数组的值

Question

目前我正在我的反冲状态中存储 post 的列表，我希望能够通过其 id 更新 post 的标题并实时查看变化。

在文档中，我看到了一个关于如何从数组中删除 object 的示例并且效果很好，但是如果我想更新数组中 object 的值怎么办？

这就是我在文档中查看的内容，但此示例只是迭代了一个数字。 https://recoiljs.org/docs/api-reference/core/useRecoilState

存储 post 的我的状态结构如下：

[
 {
  id: 1
  title: "test 1"
  desc: ""
 },
{
  id: 2
  title: "test 2"
  desc: ""
 },
{
  id: 3
  title: "test 3"
  desc: ""
 }
]

这是我当前的尝试，但出现错误：“无法读取未定义的属性（读取 'map'）”

setArticles(prevState => ({
            todoItems: prevState.todoItems.map(
              post => post.id === id ? { ...post, title: 'New Title' }: post
            )
          }))

...任何关于如何编写我的设置状态的帮助将不胜感激！

Answer 1

使用以下代码：

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

const listState = atom({
  key: 'listState',
  default: [
    {
      id: 1,
      title: 'test 1',
      desc: '',
    },
    {
      id: 2,
      title: 'test 2',
      desc: '',
    },
    {
      id: 3,
      title: 'test 3',
      desc: '',
    },
  ],
});

export default function App() {
  return (
    <RecoilRoot>
      <TextInput />
    </RecoilRoot>
  );
}

function TextInput() {
  let [list, setList] = useRecoilState(listState);

  const onChange = (event, id) => {
    let newList = [...list].map((item) => {
      if (item.id === id) return { ...item, title: event.target.value };
      else return item;
    });

    setList(newList);
  };

  return list.map((item) => (
    <div key={item.id}>
      <input
        type="text"
        value={item.title}
        onChange={(e) => onChange(e, item.id)}
      />
      <br />
      Echo: {item.title}
    </div>
  ));
}

更新存储在 Recoil js 中的 objects 数组的值

Updating the value of an array of objects stored in Recoil js

recoiljs