Méthode pour mettre à jour l'état du composant React précédent rendu par un tableau

Question

J'ai ajouté un composant React dans le tableau et rendu le tableau lorsque j'ai cliqué sur le bouton "Ajouter un composant". Chaque composant est rendu en le passant en tant que propriété au count hook.

Le problème est qu'une fois le composant ajouté au tableau et rendu, même si j'incrémente le nombre via le bouton, le nombre de crochets est mis à jour, mais le composant rendu à partir du tableau n'est pas mis à jour. Lorsque je clique à nouveau sur le bouton "Ajouter un composant", le nouveau composant sera rendu avec le hook mis à jour. Mais les composants précédents ne seront pas mis à jour au fur et à mesure de leur ajout.

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

Le hook

useState() recommande en fait de stocker des types primitifs ou des objets simples. C'est une bonne idée d'y stocker des composants, mais cela représente vraiment un lourd fardeau pour React du point de vue des performances.

Une meilleure solution consiste à utiliser des valeurs de type primitif et à transmettre ces valeurs à la carte lors du rendu. Voici un excellent exemple :

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;