Это событие 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] для следующего вызова.Как я могу сохранить выбранное имя обновленным в состоянии и использовать прикрепленный к нему идентификатор, чтобы он запускал правильный запрос?
Это элементы выбора, отображающие выпадающие списки
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 />
)
}