更新由陣列渲染的前一個React元件的狀態的方法

Question

我在點擊「新增元件」按鈕時，在陣列中新增了一個React元件，並渲染了該陣列。每個元件透過將其作為屬性傳遞給計數鉤子來進行渲染。

問題在於，一旦元件被加入到陣列並渲染出來，即使我透過按鈕增加計數，計數鉤子也會更新，但是從陣列中渲染的元件不會更新。當我再次點擊「新增元件」按鈕時，新的元件將會以更新的鉤子渲染出來。但是之前的組件不會隨著增加而更新。

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;

元件.jsx

import React from 'react'

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

Answer 1

useState() hook實際上建議儲存原始類型或簡單物件。將元件儲存在其中是一個很酷的想法，但從效能角度來看，這對React來說確實是一個沉重的負擔。

更好的解決方案是使用原始類型的值，並在渲染時將這些值傳遞給map。以下是一個很好的範例：

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;