更新由数组渲染的前一个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;