Reactjs 为什么当单个组件更新时，所有组件都将更新相同的值？

有一个相同的组件，它会出现多次，当我改变任何一个组件，然后所有组件的价值将自动更新。 但我想更改特定的组件值。 所以，请告诉我如何使用onChange函数更新特定的组件值

 import React, { Component } from "react";

 export default class ParentComponent extends Component {
     constructor(props){
         super( props);
         this.state= {
           queryPanelCounter: 3,
           fruit: 'A',
         }
     }

     handleChange = (event) => {
         this.setState({ [event.target.name]: event.target.value });
     }

     render(){
         let rawHtml= [];
         for(let i=0; i< this.state.queryPanelCounter; i++){
             rawHtml.push( 
                 <ReactExample name="fruit" value={this.state.fruit} 
      handleChange={this.handleChange} /> 
             );
         }

         return(
             <div>{rawHtml}</div>
         );
     }
 }

 export const ReactExample = ({ name, value, handleChange }) => (
     <select name={name} value={value} onChange={handleChange}>
         <option value="A">Apple</option>
         <option value="B">Banana</option>
         <option value="C">Cranberry</option>
     </select>
 )

import React，{Component}来自“React”；
导出默认类ParentComponent扩展组件{
建造师（道具）{
超级（道具）；
此。状态={
查询面板计数器：3，
水果：“A”，
}
}
handleChange=（事件）=>{
this.setState（{[event.target.name]：event.target.value}）；
}
render（）{
设rawHtml=[]；
for（设i=0；i(
苹果
香蕉
蔓越莓
)

这里只有一个数据源，

水果：'A'

因此，无论何时更改任何选择框，所有选择框都会更改，因为所有选择框都引用单个状态值

一种方法是让数组处于状态

this.state= {
    queryPanelCounter: 3,
    fruits: []   //You can define initial selected as ["A","B","C"]
}

然后您需要将

索引作为道具传递给子组件，该子组件将在状态更新时使用。另外，如果将
rawHtml
逻辑放在render之外的函数中，则更好地提高性能

rawHtml = () => {
    let rawHtml= [];
    for(let i=0; i< this.state.queryPanelCounter; i++){
        rawHtml.push( 
            <ReactExample name="fruit" value={this.state.fruits[i]} handleChange={this.handleChange} ind={i}/>  //Pass ind here
        );
    }
    return rawHtml
}

状态更新是

handleChange = (event, index) => {
  let fruits  = [...this.state.fruits];
  fruits[index] = event.target.value;
    this.setState({fruits});
}

最后，在子组件中，需要传递索引以更新状态值

const ReactExample = ({ name, value, handleChange, ind }) => (  //take index 
     <select name={name} value={value} onChange={(e) => handleChange(e,ind)}> //send ind to update state
         <option value="A">Apple</option>
         <option value="B">Banana</option>
         <option value="C">Cranberry</option>
     </select>
)

const ReactExample=（{name，value，handleChange，ind}）=>（//获取索引
handleChange（e，ind）}>//将ind发送到更新状态
苹果
香蕉
蔓越莓
)

在您的中，您应该有一个唯一的键，例如key={i}-您还应该将html构造抽象为类方法-您现在在render（）中有它，因此每次渲染它时，它都将重建这些子组件。无关：
rawHtml
是一个误导性的名称。Hi param，检查我的解决方案，让我知道这是否有帮助。嗨，param，检查这个-，然后关闭问题。
const ReactExample = ({ name, value, handleChange, ind }) => (  //take index 
     <select name={name} value={value} onChange={(e) => handleChange(e,ind)}> //send ind to update state
         <option value="A">Apple</option>
         <option value="B">Banana</option>
         <option value="C">Cranberry</option>
     </select>
)