For循环中的Onclick事件反应

Question

我有一系列数据，其中包含一个数组（json 文件）中的一些对象，它将显示在 React 中。主要问题是 for 循环 中onClick={e => this.handelruleRoom(e, element.families[j], index)} 函数中index_ 的值总是显示最后一个。例如 lenfamilies 是 3 ，当我在控制台中单击 <span key={index} onClick={e => this.handelruleRoom(e, element.families[j], index)}>Click</span> 和 key=1 时，index_ 的值是 3。

class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        data: [],
        DetailsInfo: {},
        text:{}
    }
}
render() {
    const { data } = this.state;
    const renderInfo = data.map((item, i) => {
        return (
            <div class="item">
                <div class="moreInfo" onClick={e => this.showDiv(e, item, i)}>
                    <span>show more data</span>
                </div>
                    <div class="table">{this.state.DetailsInfo[i]}</div>
                </div>
        )
    })
    return <div>{renderInfo}</div>;
}
showDiv = (e, element, i) => {
    this.setState(prevState => ({
        DetailsInfo: { ...prevState.DetailsInfo, [i]: this.renderDetails(element, i) },
    }))
}
renderDetails(element,i){
     let lenfamilies = element.families.length 
     var indents =[];
         var index=0;
     for(var j = 0 ;j <lenfamilies;j++){
         var numF = i;
         var numS = j;
         var stingF = numF.toString();
         var stingS = numS.toString();
         index= stingF+stingS
         indents.push(<div>
             <span  key={index} onClick={e => this.handelrule(e, element.families[j], index)}>Click</span>
             <span  class="text" key={index}>{this.state.text[index]}</span></div>
         )
     }
     return(
       indents
       )
     }
handelrule = (e, element, index) => {
console.log(index)
 this.setState( prevState => ({
     text: { ...prevState.text, [index]:   'test'},
     })) 
  }
}
 ReactDOM.render(<App />, document.getElementById("Result"));

Answer 1

您正在循环内创建function。您可以使用 forEach 或 map 这样的方法完全避免 for 循环

lenfamilies.forEach((fml, j) => {
         var numF = i;
         var numS = j;
         var stingF = numF.toString();
         var stingS = numS.toString();
         index= stingF+stingS
         indents.push(<span  key={index} onClick={e => this.handelrule(e, element.families[j], index)}>Click</span>
         )
     }
);

或者您可以使用let 代替var 来代替j

for(let j = 0 ;j <lenfamilies;j++){
    ...
    indents.push(<span  key={index} onClick={e => this.handelrule(e, element.families[j], index)}>Click</span>)
}

更新：-

对于index，您可以在循环内使用index 声明，也可以将let 用于index。

for(let j = 0 ;j <lenfamilies;j++){
    let index = 0;
    ....