Question

我正在执行axios调用，并且我接收到的数据是来自后端的对象数组，每个对象中包含一个称为result（格式-result：“ Hello”）的值。有一个按钮，单击该按钮时应转到特定的索引并获取指定结果的值并将其传递。不知道如何精确地做到这一点。

componentDidMount(){
let payload = this.props.location.state
axios.post(`http://localhost:8200/service/${this.service_name}/requests`,payload)
  .then( response=>{
    console.log(response.data.methods)
    this.setState({
      methods:response.data.methods,
      trace:response.data.methods[0].result  
      // Here above i have written ,but it only fetches from index[0] statically , 
        i want it to select the result of the particular button i press. 
    });
  })
 }
 playitHandler(){
  let payload = {
  "service_name":this.service_name,
  "trace_id":this.state.trace
  }
 }
 <button className="btn btn-primary" onClick={()=>this.playitHandler()}>Display</button>

尝试将索引传递给ComponentDidMount（）{}，我猜我们不能将其传递到那里，因为它引发了错误。

Answer 1

什么时候必须完成提取？因为，如果在加载页面时执行此操作，则按按钮时将无法检索特定数据。据我所知，您有两种可能：

创建一个retrieveIndexData()函数，该函数接受按钮上的click事件的输入。在此函数内，您可以运行axios调用，然后使用parseInt(ev.target.value)将数据保存在索引中。不过，我认为这不是最佳做法；
您在状态中添加了一个属性selectedIndex，并且当您单击一个按钮时，便在该属性中保存了相对索引。而是在axios调用中保存所有索引。然后，您可以使用this.state.trace[this.state.selectedIndex];

编辑：让我更好地解释第二点。在状态中，您具有属性response.data.methods，其中保存了methods数组的所有元素，包括要在状态的trace属性中保存的元素。

现在，由于您将只在状态中创建冗余，因此在该setState中，我只写：this.setState({ methods: response.data.methods })。您现在处于状态中就拥有了所有需要的东西！

最后，我认为您显示的button元素只是一个“ 0 Button”，如果您按，则需要第一种方法。因此，我猜您还有一个第二个Button，它考虑了第二个元素，依此类推。如果是正确的话，那么我应该期望这样的事情：

<button className="btn btn-primary" onClick={() => this.playitHandler(0)}Display 0</button>
<button className="btn btn-primary" onClick={() => this.playitHandler(1)}Display 1</button>
...
<button className="btn btn-primary" onClick={() => this.playitHandler(100)}Display 100</button>

假设我是对的，那么在playitHandler()中，您只需浏览this.state.methods即可检索您想要的内容：

playitHandler(methodIndex) {
    let payload = {
        "service_name": this.service_name,
        "trace_id": this.state.methods[methodIndex]
    }
}

更清楚吗？在本示例中，我避免在状态中使用selectedIndex属性，但是我认为这种方式更加简单。

从对象数组中选择一个特定的索引

1 个答案: