Methode zum Aktualisieren des Status der vorherigen React-Komponente, die von einem Array gerendert wird

Question

Ich habe dem Array eine React-Komponente hinzugefügt und das Array gerendert, als ich auf die Schaltfläche „Komponente hinzufügen“ geklickt habe. Jede Komponente wird gerendert, indem sie als Eigenschaft an den Count-Hook übergeben wird.

Das Problem besteht darin, dass, sobald die Komponente zum Array hinzugefügt und gerendert wird, der Count-Hook aktualisiert wird, selbst wenn ich die Anzahl über die Schaltfläche erhöhe, die aus dem Array gerenderte Komponente jedoch nicht aktualisiert wird. Wenn ich erneut auf die Schaltfläche „Komponente hinzufügen“ klicke, wird die neue Komponente mit dem aktualisierten Hook gerendert. Vorherige Komponenten werden jedoch nicht aktualisiert, wenn sie hinzugefügt werden.

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;

component.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;