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

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>
  );
}

我不知道如何将数据中的车辆值更改为新数据中的值，以便数据变成这样:

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" }
];

codesandbox

在代码的后续部分，我需要遍历数据并显示更新后的汽车数值，但是我不确定要使用哪种方法。非常感谢任何帮助。

- new_reactjs

Answer 1

只需获取正在迭代的对象的索引，然后在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);

- CertainPerformance

Answer 2

你可以使用 map 方法在 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);

- DecPK

Answer 3

当你点击按钮时，所有新车的数值都会更新。但是UI不会更新。 假设你有一个初始数组，并且想要覆盖所有汽车数值，你需要使用useState() hook创建一个新变量，并将数据数组作为初始值。 然后你需要使用useEffect() hook在从服务器获取新汽车数据后更新状态，或者使用settimeout()并更新状态。

  [data,setdata]=useState(data)

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

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

- Salah Ben Bouzid