如何使用 Hooks 仅更改大型对象状态数组中的一个对象？

Question

我处于以下状态：

const [data, setData] = useState([{id:1, marks: 1} , {id:2, marks: 20}, {id:3, marks: 30}, {id:4, marks: 40}])

我想编写一个函数，它接受一个 id 并使用 setData（或任何其他方法）将那个特定 id 的 marks 增加 1 )

Answer 1

首先为了更好的可读性 - 排除该数组：将该转换逻辑推送到 useEffect 挂钩中。

  const marks = [
    { id: 1, marks: 1 },
    { id: 2, marks: 20 },
    { id: 3, marks: 30 },
    { id: 4, marks: 40 }
  ]

  const [data, setData] = useState([])

  const transformSpecificMark = (marks, id) => {
    setData(
      marks.map(item =>
        item.id === id
          ? { ...item, marks: marks + 1 }
          : item
      ))
  }
  useEffect(() => {
    transformSpecificMark(marks, id)
  }, [id]);

您可以很容易地使用 transformSpecificMark 函数来转换所有标记等

基于触发器UI事件的函数：

     const transformSpecificMark = (id) => {
            setData(
              data.map(item =>
                item.id === id
                  ? { ...item, marks: marks + 1 }
                  : item
              ))
          }


<button onClick={() => transformSpecificMark(id)}>Click</button

Answer 2

你可以简单地做一个衬垫

const updateDataById = (id) => {
      setData(prev =>
          prev.map(e => e.id === id ? {...e, mark: e.mark + 1 } : e )
      )
}

如何使用 Hooks 仅更改大型对象状态数组中的一个对象？

How to change only one object in a large state array of objects using Hooks?

state

reactjs

react-hooks

use-state