如何更新 React JS 状态功能组件

Question

我怎样才能改变一个状态中的特定对象，例如，我有这样的数据

const colors= [
      {
        id: 1,
        name: "red",
      },
      {
        id: 1,
        name: "green",
      },
      {
        id: 2,
        name: "blue",
      },
    ];

const storage = [{
id:2,
name:"64 GB"
},
{
id:2,
name:"128 GB"
]

状态值应该是这样的[{id:1, name:'red"}, {id:2,name:"128GB"}]

有什么方法可以只根据id更新state吗？例如：我需要循环数据，如果 state.id === id 它将更新该特定对象。所以在我们的示例中，如果 state.id === 1

，我需要将状态更新为 [{id:1, name:'green"}, {id:2,name:"128GB"}]

提前致谢

Answer 1

您可以随时复制本地变量中的当前值，修改并重新设置状态。类似于：

const [colors, setColor] = useState([
  {
    id: 1,
    name: "red",
  },
  {
    id: 1,
    name: "green",
  },
  {
    id: 2,
    name: "blue",
  },
]);

...

let colorCopy = Object.assign({}, colors); //<-- make a copy of color
colorCopy = colorCopy.map(x => { 
   if (x.id === 1) x.name = "black";
   return x;
}; // modify name property for id === 1
setColor(colorCopy); //<-- set new state

编辑

@Nicolas Menettrier 和@andy mccullough 提出了一个很好的讨论点：“如果 map 函数已经复制了颜色数组，为什么还要调用 Object.assign？”这是正确的，所以你也可以这样写上面的代码：

let colorCopy = colors.map(x => { 
   if (x.id === 1) x.name = "black";
   return x;
}; // modify name property for id === 1
setColor(colorCopy); //<-- set new state

少了1行代码。

Answer 2

您可以使用浅拷贝更新对象的数组状态并更改值，如下所示：

import * as React from "react";

export default function App() {
  const [colors, setColors] = React.useState([
    {
      id: 1,
      name: "red"
    },
    {
      id: 1,
      name: "green"
    },
    {
      id: 2,
      name: "blue"
    }
  ]);
  const updateState = (id, name) => {
    let copy = [...colors];
    let color = copy.filter((x) => x.id == id)[0];
    if (!color) return;
    let index = copy.indexOf(color);
    color.name = name;
    copy[index] = color;
    setColors(copy);
  };
  return (
    <div className="App">
      {colors.map((color, index) => (
        <>
          <p>
            {color.id} : {color.name}
          </p>
        </>
      ))}
      <button
        onClick={() => {
          updateState(2, "yellow");
        }}
      >
        update
      </button>
    </div>
  );
}

如何更新 React JS 状态功能组件

How to update react JS state functional component

javascript

reactjs

react-functional-component