如何更新 Javascript 中对象数组中每个 object 的值？

Question

我正在尝试使用newData中的值更新数组（数据）中所有对象中的car值，我的代码是：

import "./styles.css";

const data = [
  { id: 1, car: "Toyota 2020", owner: "BM" },
  { id: 2, car: "Nissan", owner: "DK" },
  { id: 3, car: "Mazda", owner: "JA" },
  { id: 4, car: "Ford", owner: "DS" }
];
const newData = ["Audi", "Bentley", "BMW", "Buick"];


export default function App() {
  return (
    <div className="App">
      {data?.map((item) => {
        return <li key={item.id}>{item.car}</li>;
      })}
    </div>
  );
}

我不知道如何使用 newData 中的值更改数据中的汽车值，因此数据将如下所示：

const data = [
  { id: 1, car: "Audi", owner: "BM" },
  { id: 2, car: "Bentley", owner: "DK" },
  { id: 3, car: "BMW", owner: "JA" },
  { id: 4, car: "Buick", owner: "DS" }
];

密码箱

稍后在代码中我通过数据进行映射，我需要显示更新的汽车值，我不确定使用哪种方法。 非常感谢任何帮助。

Answer 1

只需获取被迭代的 object 的索引，然后在newData数组中查找它？

 const data = [ { id: 1, car: "Toyota 2020", owner: "BM" }, { id: 2, car: "Nissan", owner: "DK" }, { id: 3, car: "Mazda", owner: "JA" }, { id: 4, car: "Ford", owner: "DS" } ]; const newData = ["Audi", "Bentley", "BMW", "Buick"]; const newCars = data.map((obj, i) => ({...obj, car: newData[i] })); console.log(newCars);

Answer 2

当您单击它时，您可以使用一个按钮更新所有新车值。 但用户界面不会更新。 假设您有一个初始数组，并且您想要覆盖所有汽车值，您必须使用 useState() 钩子创建一个新变量并将数据数组作为初始值。 那么在从服务器获取新车数据后，您必须执行 useeffect() 挂钩来更新 state，或者放置 settimeout() 并用它更新 state

  [data,setdata]=useState(data)

   useEffect(() => {
   /// do whatever with the original array (data)

  setTimeout(() => {
  /// update the state 
  setdata(thenewarry)
  }, 3000);
  }, []);

Answer 3

您可以使用map over data或newData来实现结果

 const data = [ { id: 1, car: "Toyota 2020", owner: "BM" }, { id: 2, car: "Nissan", owner: "DK" }, { id: 3, car: "Mazda", owner: "JA" }, { id: 4, car: "Ford", owner: "DS" }, ]; const newData = ["Audi", "Bentley", "BMW", "Buick"]; const result = newData.map((c, i) => { return {...data[i], car: c }; }); console.log(result);

使用 map 在 newData

 const data = [ { id: 1, car: "Toyota 2020", owner: "BM" }, { id: 2, car: "Nissan", owner: "DK" }, { id: 3, car: "Mazda", owner: "JA" }, { id: 4, car: "Ford", owner: "DS" }, ]; const newData = ["Audi", "Bentley", "BMW", "Buick"]; const result = data.map((obj, i) => { return {...obj, car: newData[i] }; }); console.log(result);