下拉选择更改时的更新状态React [英] Updating state when dropdown select is changed React

问题描述

此onChange事件处理 dataschema 的选择，然后发出后续请求以获取所选 dataschema 的 queryschemas . handleChange 正常工作，并在下拉列表中呈现相应的 querySchemas .

This onChange event handles the selection of a dataschema then makes a subsequent request to get the queryschemas of the selected dataschema. handleChange is working correctly and renders the appropriate querySchemas in a dropdown list.

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，从而触发正确的请求?

Then the second call is using the querySchemaId to make a request to the specific URI, But querySchemaId: response.data.data[0].id, always grabs the first array from the response, obviously. So my issue is if I choose a different querySchema from the drop down it is always using the response in position [0] to make the next call. How can I keep the name that is selected updated in state and use the id attached to it, so it fires the right request?

这些是呈现下拉菜单的选择元素

These are the select elements rendering the dropdowns

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

推荐答案

您忘记了将所选值保存为状态(用于 select )并使用事件数据( id )直接(在查询网址中)，而不是从状态( setState 是异步的，稍后会更新):

You forgot to save selected value in the state (for select) and use event data (id) directly (in query url), not from state (setState is async, it will be updated later):

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 (在查询中不使用)?它在其他地方使用吗?

querySchemaName is used for current select value. Is saving querySchemaId needed now (not used in query)? Is it used elsewhere?

这篇关于下拉选择更改时的更新状态React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！