Question

我有一系列数据，这些数据在一个数组（json文件）中包含一些对象，它将在React中显示。主要问题是 for循环中index_函数中onClick={e => this.handelruleRoom(e, element.families[j], 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的{{1}}

更新：-

对于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循环中的Onclick事件反应

1 个答案: