Javascript 如何从映射数组中获取选定值？

我有一个标记为

this.state.candidate\u stages

的数据数组，我映射了这些数据。如何获取数组中的选定值？例如，当我选择一个显示的值时，我希望控制台记录所选的值

class SettingsPage extends Component {

 getStage = (data) => {
    console.log(data);
    console.log("testing");
    console.log(this.state.candidate_stages);
  };

componentDidMount() {
    axios
      .get("https://url", config)

      .then((response) => {
        console.log("Stages:", response.data);
        this.setState({ candidate_stages: response.data });
      })
      .catch((error) => {
        if (error.response) {
          // The request was made and the server responded with a status code
          // that falls out of the range of 2xx
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else if (error.request) {
          // The request was made but no response was received
          // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
          // http.ClientRequest in node.js
          console.log(error.request);
        } else {
          // Something happened in setting up the request that triggered an Error
          console.log("Error", error.message);
        }
        console.log(error.config);
      });
  }    

  render() {
    return (
      <div className="settings-page">
              <div>
                {
                  // Ternary statement - return empty div if undefined
                  // Otherwise, return a map function to loop through array
                  // of candidate_stages
                  this.state.candidate_stages === undefined ? (
                    <div></div>
                  ) : (
                    this.state.candidate_stages.map((element) => (
                      <div
                        className="stage-container"
                        onClick={(e) => this.getStage(e)}
                      >
                        <h1 key={element.id} className="candidate-tab">
                          {element.tab}
                        </h1>
                        <h2 key={element} className="candidate-title">
                          {element.title}
                        </h2>
                        <ion-icon
                          id="pencil"
                          name="create"
                          onClick={(e) => {
                            this.showEditStage(e);
                          }}
                        ></ion-icon>
                        <ion-icon id="pencil-square" name="square"></ion-icon>
                        <ion-icon id="trash" name="trash"></ion-icon>
                        <ion-icon id="trash-square" name="square"></ion-icon>
                      </div>
                    ))
                  )
                }
              </div>
         </div>
     ) 
   }
}

类设置页面扩展组件{
getStage=（数据）=>{
控制台日志（数据）；
控制台日志（“测试”）；
console.log（this.state.candidate_stages）；
};
componentDidMount（）{
axios
.get（“https://url“，配置）
。然后（（响应）=>{
console.log（“Stages:”，response.data）；
this.setState（{candidate_stages:response.data}）；
})
.catch（（错误）=>{
if（error.response）{
//请求已发出，服务器用状态代码响应
//这超出了2xx的范围
console.log（error.response.data）；
日志（错误、响应、状态）；
日志（error.response.headers）；
}else if（error.request）{
//提出了请求，但没有收到任何答复
//'error.request'是浏览器中XMLHttpRequest的实例，也是
//node.js中的http.ClientRequest
console.log（error.request）；
}否则{
//设置触发错误的请求时发生了一些问题
console.log（“错误”，Error.message）；
}
log（error.config）；
});
}    
render（）{
返回(
{
//三元语句-如果未定义，则返回空div
//否则，返回一个map函数来循环数组
//候选者的阶段
this.state.candidate_stages==未定义(
) : (
this.state.candidate_stages.map（（元素）=>(
这个.getStage（e）}
>
{element.tab}
{element.title}
{
这一阶段（e）；
}}
>
))
)
}
) 
}
}

我假设您希望将映射元素收集到

getStage

函数中，您只需修改

onClick

属性即可

onClick={(e) => this.getStage(e, element)}

除此之外，我建议在这里制定更清晰的代码，将代码的这一部分修改为：

this.state.candidate_stages && (
  this.state.candidate_stages.map((element) => (... // the rest of the code

通过这种方式，Javascript检查

This.state.candidate\u stages

是否为真（

undefined

为假），如果是真的，它将继续计算第二个表达式，因为它是

&

运算符中的最后一个表达式，它将返回该值，这就是您想要的值

现在，如果state的值是falsy，那么它只返回该falsy值，而前端中没有呈现任何内容，这也是您想要的。：）

函数printData（dataObject）
{
如果（！dataObject）返回；
让keys=Object.keys（dataObject）；
for（设i=0；i

---

我不知道这是你想要的答案。

谢谢你的建议。您的解决方案成功了，只是我做了一个小编辑，onClick={（e）=>this.getStage（element，e）}