Javascript 如何获取由映射函数生成的列表项的键？

因此，我正在学习React，我尝试在stackoverflow和React自己的文档中寻找问题的解决方案，但我仍然感到困惑

基本上，我有一个10个子Reddits的列表，它以

subredditsArray

变量的形式映射到列表项

我呈现结果，并在单击该列表项时尝试将所选项传递给我的

getSubredditInfo

函数。但是，这不起作用-

event.target.key

未定义。（为了澄清，我希望抓取我单击的单个列表元素的键）

当我尝试只获取

event.target

时，我得到了实际的htmlElement（例如：

Dota2

），在这里，我想获取键，或者至少将该值以某种方式放入一个没有标记的字符串中。我还尝试将onClick方法放在map函数的list标记中，但没有成功

以下是相关代码：

//this is where I get my data
componentDidMount(){
    fetch('https://www.reddit.com/api/search_reddit_names.json?query=dota2')
    .then(results => {
        return results.json();
    })
    .then(redditNames => {
        //this is there I set my subreddits state variable to the array of strings
        this.setState({subreddits: redditNames.names});
    })
}

   getSubredditInfo(event){
    //console.log(event.target.key); <-- DOESNT WORK

}

render() {

 var subredditsArray = this.state.subreddits.map(function(subreddit){
    return (<li key={subreddit.toString()}>{subreddit}</li>);
});

  return (
    <div className="redditResults">
      <h1>Top 10 subreddits for that topic</h1>
      <ul onClick={this.getSubredditInfo}>{subredditsArray}</ul>
    </div>
  );
}

//这是我获取数据的地方
componentDidMount（）{
取（'https://www.reddit.com/api/search_reddit_names.json?query=dota2')
。然后（结果=>{
返回results.json（）；
})
。然后（redditNames=>{
//在这里，我将subreddits状态变量设置为字符串数组
this.setState（{subreddits:redditNames.names}）；
})
}
getSubredditInfo（事件）{
//console.log（event.target.key）；尝试以下代码：


类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={subreddits:[]}；
}
componentDidMount（）{
取（'https://www.reddit.com/api/search_reddit_names.json?query=dota2')
。然后（结果=>{
返回results.json（）；
})
。然后（redditNames=>{
//在这里，我将subreddits状态变量设置为字符串数组
this.setState（{subreddits:redditNames.names}）；
})
}
getSubredditInfo（subreddit）{
console.log（subreddit）；
}
render（）{
返回
该主题的前10个子项

{ 
this.state.subreddits.map（（subreddit）=>{
返回（
this.getSubredditInfo（subreddit）}>{subreddit}
）；
})
}

;
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
)；
你想这样做吗？我不知道你想做什么

getSubredditInfo(e, subreddit) {
  console.log(subreddit)
}

render() {
  const { subreddits } = this.state
  var subredditsArray = subreddits.map(subreddit => (
    <li 
      key={subreddit.toString()} 
      onClick={(e) => {
        this.getSubredditInfo(e, subreddit)
      }}
    >
      {subreddit}
    </li>
  ))

  return (
    <div className="redditResults">
      <h1>Top 10 subreddits for that topic</h1>
      <ul>{subredditsArray}</ul>
    </div>
  );
}

getSubredditInfo（e，subreddit）{
console.log（subreddit）
}
render（）{
const{subreddits}=this.state
var subredditsArray=subreddits.map（subreddit=>(
{
this.getSubredditInfo（e，subreddit）
}}
>
{subreddit}

))
返回(
该主题的前10个子项
{subredditsArray}
);
}

关键目的是将子reddit传递给onClick函数，以便在单击该项时接收该值


如果你仍然出错，试试这个，告诉我发生了什么

render() {
  const { subreddits } = this.state
  var subredditsArray = subreddits.map(subreddit => (
    <li 
      key={subreddit.toString()} 
      onClick={(e) => {
        console.log(subreddit.toString())
      }}
    >
      {subreddit}
    </li>
  ))

  return (
    <div className="redditResults">
      <h1>Top 10 subreddits for that topic</h1>
      <ul>{subredditsArray}</ul>
    </div>
  );
}

render（）{
const{subreddits}=this.state
var subredditsArray=subreddits.map（subreddit=>(
{
console.log（subreddit.toString（））
}}
>
{subreddit}

))
返回(
该主题的前10个子项
{subredditsArray}
);
}
您可以使用lamda函数或为具有自己的
getSubredditInfo
函数值的项目列表制作组件

getSubredditInfo(value) {}

render() {

  var subredditsArray = this.state
   .subreddits.map((subreddit, i) => 
     (<li key={i} 
          onClick={() => this.getSubredditInfo(subreddit)}>{subreddit}</li>));

  return (
    <div className="redditResults">
      <h1>Top 10 subreddits for that topic</h1>
      <ul>{subredditsArray}</ul>
    </div>
  );
}

getSubredditInfo（值）{}
render（）{
var subredditsArray=this.state
.subreddits.map（（subreddit，i）=>
（
this.getSubredditInfo（subreddit）}>{subreddit}
）；
返回(
该主题的前10个子项
{subredditsArray}
);
}
1）键应该由数组中对象的id抓取。或者您可以组合这两个属性来创建一个唯一的键，以便更好地处理重新渲染

如果您有一个字符串数组，您可以使用字符串值+索引的组合来创建一个唯一的值，尽管不鼓励使用索引

下面给出了两个方面的快速示例

2） 更好的方法是将map函数移动到另一个函数中，并在render函数中调用该函数，该函数将返回所需的JSX。它将清理渲染函数


类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
subredditsObjArray：[
{id:1，值：'A'}，
{id:2，值：'B'}，
{id:3，值：'C'}，
{id:4，值：'D'}
],
子Reddits数组：['A'，'B'，'C'，'D']，
selectedValue:“”
};
}
getSubredditInfo=（subreddit）=>{
console.log（subreddit）
这是我的国家({
selectedValue:（（subreddit&&subreddit.id）？subreddit.value:subreddit），
});
}
render（）{
返回(
所选值：{this.state.selectedValue}

Top{this.state.subredditsaray.length | |“0”}该主题的subreddits
带对象数组


{
这个.state.subredditsObjArray
&&this.state.subredditsObjArray.map（redditObj=>{
返回（
this.getSubredditInfo（redditObj）}>{redditObj.value | |'未找到'}
）；
})
}



带字符串数组


{
this.state.subreddits数组
&&this.state.subredditsArray.map（（reddit，index）=>{
返回（
this.getSubredditInfo（reddit）}>{reddit | | notfound'}
）；
})
}

);
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);