Kaedah untuk mengemas kini keadaan komponen React sebelumnya yang diberikan oleh tatasusunan

Question

Saya menambah komponen React dalam tatasusunan dan memaparkan tatasusunan apabila saya mengklik butang "Tambah Komponen". Setiap komponen diberikan dengan menghantarnya sebagai harta kepada cangkuk kiraan.

Masalahnya ialah sebaik sahaja komponen ditambahkan pada tatasusunan dan dipaparkan, walaupun saya menambah kiraan melalui butang, cangkuk kiraan mengemas kini, tetapi komponen yang diberikan daripada tatasusunan tidak dikemas kini. Apabila saya mengklik butang "Tambah Komponen" sekali lagi, komponen baharu akan dipaparkan dengan cangkuk yang dikemas kini. Tetapi komponen sebelumnya tidak akan dikemas kini kerana ia ditambah.

App.js

import React, { useState } from 'react';
import Component from './Components/Component';

function App() {
  const [comp, setComp] = useState([]);
  const [count, setCount] = useState(0);

  const addComp = ()=>{
    setComp(prevState=>{
      return([...prevState,<Component key={comp.length} count={count}></Component>])
    })
  }

  const increment = ()=>{
    setCount(prevState=>prevState+1)
  }

  return (
    <>
      <button onClick={addComp}>添加组件</button>
      <button onClick={increment}>增加</button>
      {comp}
    </>
  )
}

# export default App;

komponen.jsx

import React from 'react'

export default function Component(props) {
  return (
    <div>{props.count}</div>
  )
}

Answer 1

useState() cangkuk sebenarnya mengesyorkan menyimpan jenis primitif atau objek mudah. Ia adalah idea yang bagus untuk menyimpan komponen di dalamnya, tetapi ia benar-benar membebankan React dari perspektif prestasi.

Penyelesaian yang lebih baik ialah menggunakan nilai jenis primitif dan hantar nilai ini ke peta semasa membuat rendering. Berikut ialah contoh yang bagus:

import React, { useState } from 'react';
import Component from './Components/Component';

function App() {
  const [comp, setComp] = useState([]);
  const [count, setCount] = useState(0);

  const addComp = () => {
    setComp(prevState=>[...prevState, count])
  }

  const increment = () => {
    setCount(prevState=>prevState+1)
  }

  return (
    <>
      <button onClick={addComp}>Add Component</button>
      <button onClick={increment}>Increment</button>
      {comp.map((c,index) => <Component key={index} count={c}></Component>)}
    </>
  )
}

# export default App;