Javascript 单击子元素数组时出错

我试图使这些子元素可以单独单击。当我单击这些子元素时，我希望它显示为“单击”

供参考：状态={ 列表：[{子列表：[ “约翰尼”， “卡尔”]} ] }

import React，{Component}来自'React'；
导入“/App.css”；
从“/Comp”导入Comp；
类应用程序扩展组件{
状态={
列表：[{子列表：[
“约翰尼”，
“卡尔”]}
]
}
changetext=事件=>{
//const{textContent}=event.target；
const textContent=event.target.textContent；
//当需要引用上一个状态时，请始终使用setState的回调语法
这是我的国家(
{list:this.state.list[0].sublist.map（el=>textContent==el？“单击”：el）}）；
}
render（）{
返回(
);
}
}
导出默认应用程序；

这里是我发送状态的地方，它迭代并显示div列表。我想让每一个点击，并改变文本为“点击”为每个单独的子元素的列表

当我将state={list:[“johny”，“carl”]}设置为没有内部对象和对象中的另一个数组时，这可以正常工作。（另外，将{props.list[0].子列表[I]}设置为props.list[I]）。但是，当我尝试读取子列表时，它会出错，我会在底部得到错误

import React from 'react';

const Comp = props => {

    let listarr = [];

    for(let i = 0; i < 3; i++)
    {
        listarr[i] = <div key={i} onClick={props.changetext}>{props.list[0].sublist[i]}</div>;
    }

    return(
        <div>{listarr}</div>

    );
}

export default Comp;

从“React”导入React；
const Comp=props=>{
设listarr=[]；
for（设i=0；i<3；i++）
{
listarr[i]={props.list[0]。子列表[i]}；
}
返回(
{listarr}
);
}
导出默认Comp；

当我尝试单击每个元素时，会出现以下错误：

TypeError: Cannot read property '0' of undefined
Comp
C:/Users/cburzo/Desktop/reactest3/src/Comp.js:12
   9 | 
  10 |    for(let i = 0; i < 3; i++)
  11 |    {
> 12 |        listarr[i] = <div key={i} onClick={props.changetext}>{props.list[0].sublist[i]}</div>;
  13 |    }
  14 |    
  15 |    return(
View compiled
▶ 15 stack frames were collapsed

TypeError:无法读取未定义的属性“0”
公司
C:/Users/cburzo/Desktop/reactest3/src/Comp.js:12
9 | 
10 | for（设i=0；i<3；i++）
11 |    {
>12 | listarr[i]={props.list[0]。子列表[i]}；
13 |    }
14 |    
15 |返回(
视图编译
▶ 15个烟囱框架倒塌

您的状态设置错误，map返回一个数组并将其分配给列表，该列表不是初始状态的构造方式，您需要的是：

  this.setState({
      list: [
        {
          sublist: this.state.list[0].sublist.map(
            el => (textContent === el ? "clicked" : el)
          )
        }
      ]
    });

---

您的状态设置错误，map返回一个数组并将其分配给列表，该列表不是初始状态的构造方式，您需要的是：

  this.setState({
      list: [
        {
          sublist: this.state.list[0].sublist.map(
            el => (textContent === el ? "clicked" : el)
          )
        }
      ]
    });

---

@克雷，你明白了吗，还是需要更多的解释？@克雷，你明白了吗，还是需要更多的解释？