Saya mencoba memperbarui nilai mobil di semua objek dalam array(data) dengan nilai dari Databaru, kode saya adalah:

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


Saya tidak tahu cara mengubah nilai mobil di data dengan nilai dari newData, jadi datanya akan seperti ini:

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

kode dan kotak

Kemudian dalam kode saya memetakan melalui data dan saya perlu menampilkan nilai mobil yang diperbarui, saya tidak yakin metode mana yang akan digunakan. Setiap bantuan sangat dihargai.

-1
new_reactjs 23 April 2021, 05:51

3 jawaban

Jawaban Terbaik

Ambil saja indeks objek yang sedang diulang, dan cari di array 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);
2
CertainPerformance 23 April 2021, 02:53

Anda dapat mencapai hasil dengan menggunakan peta lebih dari data atau 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);

Dengan peta di atas 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);
0
SAM 23 April 2021, 02:54

Anda bisa dengan tombol ketika Anda mengkliknya semua nilai mobil baru akan diperbarui. tetapi UI tidak akan diperbarui. mari kita berpura-pura bahwa Anda memiliki array awal dan Anda ingin menimpa semua nilai mobil Anda harus membuat variabel baru dengan useState() hook dan menempatkan array data sebagai nilai awal. maka Anda harus melakukan hook useeffect() untuk memperbarui status setelah Anda mendapatkan data mobil baru dari server, atau meletakkan settimeout() dan memperbarui status dengannya

  [data,setdata]=useState(data)

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

  setTimeout(() => {
  /// update the state 
  setdata(thenewarry)
  }, 3000);
  }, []);
1
Salah Ben Bouzid 23 April 2021, 04:59