下拉选择更改时更新状态React

Question

这个onChange事件处理dataschema的选择然后发出后续请求以获得所选queryschemas的dataschema。 handleChange正常工作，并在下拉列表中呈现适当的querySchemas。

handleChange = (e) => {
    const dataSchema = this.state.dataSchemas.find(dataSchema => dataSchema.name === e.target.value);
    if (dataSchema) {
      axios({
        method: 'get',
        url: `${dataSchema.selfUri}/queryschemas/`,
        headers: { 'Accept': "" }
      })
        .then(response => {
          console.log(response)
          console.log(JSON.stringify(dataSchema.selfUri));
          console.log(dataSchema.id)
          this.setState({
            querySchemaId: response.data.data[0].id,
            querySchemaUri: response.data.data[0].selfUri,
            querySchemaName: response.data.data[0].name,
            querySchemas: response.data.data, //has list of querySchemas from request
            selectedId: dataSchema.id
          }, () => {
            console.log(this.state.querySchemaId)
            console.log(this.state.querySchemaUri)
            console.log(this.state.querySchemaName)
            console.log(this.state.selectedId)
          });
        })
        .catch(error => console.log(error.response));
    }
  }

  //This is the list of querySchemas returned by the above request
  {
  "data" : [ {
    //array postion [0] -- 
    "id" : "2147483601",
    "selfUri" : "/dataschemas/2147483600/queryschemas/2147483601",
    "name" : "QS-1"
  }, {
    //array position [1]
    "id" : "2147483602",
    "selfUri" : "/dataschemas/2147483600/queryschemas/2147483602",
    "name" : "QS-2"
  } ]
}


  querySchemaChange = e => {
    const querySchema = this.state.querySchemas.find(querySchema => querySchema.name === e.target.value);
    if (querySchema) {
      axios({
        method: 'get',
        url: `/dataschemas/${this.state.selectedId}/queryschemas/${this.state.querySchemaId}/queries`,  //<--- {this.state.querySchemaId} is not updating to show the current querySchema that is selected
        headers: { "Accept": "" }
      })
        .then(response => {
          console.log(response)
        })
        .catch(error => console.log(error.response));
    }
  }

然后第二个调用是使用querySchemaId向特定URI发出请求，但querySchemaId: response.data.data[0].id,总是从响应中抓取第一个数组。所以我的问题是如果我从下拉列表中选择不同的querySchema，它总是使用[0]位置的响应进行下一次调用。如何保持所选的名称在状态中更新并使用附加的ID，以便触发正确的请求？

这些是呈现下拉列表的选择元素

render(){
  return ( 

    <label>
      Pick a DataSchema to filter down available QuerySchemas:
  <select value={this.state.value} onChange={this.handleChange}>
        {dataSchemas &&
          dataSchemas.length > 0 &&
          dataSchemas.map(dataSchema => {
            return <option value={dataSchema.name}>{dataSchema.name}</option>;
          })}
      </select>
    </label>{" "}
    <br />

    <label>
      Pick a QuerySchema to view its corresponding queries status:
    <select value={this.state.querySchemaName} onChange={this.handleChange} onChange={this.querySchemaChange}>
        {querySchemas &&
          querySchemas.map(querySchema => {
            return <option value={querySchema.name}>{querySchema.name}</option>;
          })}
      </select>
    </label>{" "}
    <br />
 )
}

Answer 1

您忘记在状态中保存选定的值（对于select）并直接使用事件数据（id）（在查询URL中），而不是从状态（setState是异步，稍后将更新）：

querySchemaChange = e => {
  const querySchema = this.state.querySchemas.find(querySchema => querySchema.name === e.target.value);
  if (querySchema) {
    const {id, name} = querySchema
    this.setState({
      querySchemaId : id, 
      querySchemaName: name
    });
    axios({
      method: 'get',
      url: `/dataschemas/${this.state.selectedId}/queryschemas/${id}/queries`,  

querySchemaName用于当前的select值。现在需要保存querySchemaId（不用于查询）？它在其他地方用过吗？