ReactJS：使用不同的值更新状态数组的每个元素

Question

对于 React JS 中的以下情况，我需要一点帮助： 我的一个组件中有一个状态，它是一个由 3 个 json 对象组成的数组，如下所示：

 const [data, setData] = useState([ {name:'a'}, {name:'b'}, {name:'c'}]) 

而且我还有一个包含 3 个随机名称的数组：

const randomArray = ['d', 'e', 'f']

我想创建一个将randomArray 作为参数的方法，并将像这样更新新状态：

data = [ {name:'d'}, {name:'e'}, {name:'f'}]

有什么想法吗？

Answer 1

您可以使用地图功能。它从回调函数返回一个新数组。您可以像这样返回 name 属性；

import { useEffect, useState } from "react";

export default function App() {
  const [data, setData] = useState([
    { name: "a" },
    { name: "b" },
    { name: "c" }
  ]);
  const randomArray = ["d", "e", "f"];

  const setNewValues = () => {
    setData(randomArray.map(name=> ({ name})));
  };

  useEffect(() => {
    console.log(data);
  }, [data]);
  return (
    <div className="App">
      <button onClick={setNewValues}>Set Data </button>
    </div>
  );
}

Answer 2

这是您可以做到的一种方式。

const ArrChange = () => {
 const randomArray = ['d', 'e', 'f'];
 const [data, setData] = useState([ {name:'a'}, {name:'b'}, {name:'c'}]) 
 const setData = () => {
   for(let i = 0; i < randomArray.lenght; i++)
      d[i].name = randomArray[i];
 }

 <Button onClick={setData}>
          Update
      </Button>
 }

Answer 3

给你！ :)

const convertToJSON = array => {
  setData(array.map(name => ({ name })));
};