javascript - 如何获取从地图函数生成的列表项的键？

Question

所以我正在学习 React，我尝试在 stackoverflow 和 React 自己的文档上寻找我的问题的解决方案，但我仍然很难过。

subredditsArray本质上，我有一个包含 10 个子目录的列表，这些子目录以变量的形式映射到列表项。

我呈现结果，并在单击该列表项时尝试将所选项目传递给我的getSubredditInfo函数。但是，这不起作用 -event.target.key未定义。（为了澄清，我正在寻找我点击的单个列表元素的键）。

当我尝试获取event.target时，我得到了实际的 htmlElement（例如：）<li>Dota2</li>，因为我想在其中获取密钥，或者至少以某种方式将这个值转换为没有标签的字符串。我还尝试将我的 onClick 方法放在 map 函数的列表标记中，但这不起作用。

以下是相关代码：

//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>
  );
}

我的问题基本上可以归结为：

1. 如何从列表对象中获取键值？
2. 此外，有没有比我现在更好的方法来生成列表？

先感谢您。

编辑：添加了我的 componentDidMount 函数，希望它能更清楚地说明问题。

标签： javascriptreactjs

Answer 1

试试下面的代码：

class App extends React.Component {
  constructor(props){
     super(props);
     this.state = {subreddits:[]};
  }
  
  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(subreddit){
     console.log(subreddit);
  }
  
  render() {
    return <div className="redditResults">
      <h1>Top 10 subreddits for that topic</h1>
      <ul>
        { 
            this.state.subreddits.map((subreddit)=>{
                return (<li key={subreddit.toString()} onClick={()=>this.getSubredditInfo(subreddit)}>{subreddit}</li>);
            })
        }
      </ul>
    </div>;
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

请立即检查onClick事件处理程序。它是一个箭头函数，它getSubredditInfo用你的subredditnow 调用该函数。所以你会得到它。

所以它调用处理程序以将数据传递给处理程序的方式基本不同。

它可以按您的预期工作。