Json 为每个选择选项响应API调用
我有这个函数,它接收选择选项值。 此外,我有3个选择选项(级别、设施、主机)。当我选择选项时,该值将发送到此函数Json 为每个选择选项响应API调用,json,reactjs,typescript,api,filter,Json,Reactjs,Typescript,Api,Filter,我有这个函数,它接收选择选项值。 此外,我有3个选择选项(级别、设施、主机)。当我选择选项时,该值将发送到此函数 private optionFilterHandler = (option: string, key: string | number) => { // the key can be level , facility , host // whereas options are the values of keys // for level option values a
private optionFilterHandler = (option: string, key: string | number) => {
// the key can be level , facility , host
// whereas options are the values of keys
// for level option values are (debug , warning ,info etc)
// similarly for host and facility have options values
if (option || key) {
this.setState({
option: option,
key: key,
},
this.filterHandler
); // callback function
}
然后作为选项和键存储在状态中
问题是我需要将这三个选项全部发送到API
例如:API调用应该是这样的
private filterHandler = async () => {
const response: Response = await fetch(
'http://egrde-tvm-aso1.de.egr.lan:3000/api/v1/search',
{
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
facility: this.state.option,
level: this.state.option,
host: this.state.option
});
});
}
那么,我应该如何发送json.Stringify({})中的所有三个选项,因为我只得到一个选项值
每次我选择选项时,以及如何检查选项值是否属于级别、设施或主机。您可以更改状态,使其具有一个对象,该对象收集所有选项。然后在事件处理程序中,只需将选项分配给属性
键
。此外,您可能打算在事件处理程序中使用&&
而不是|
constructor(props) {
super(props);
this.state = {
options: {
level: undefined,
facility: undefined,
host: undefined
}
};
}
private optionFilterHandler = (option: string, key: string | number) => {
if (option && key) {
this.setState(
{
options: { ...this.state.options, [key]: option }
// copies the old options object and sets the property `key` to
// the value `option`
// Uses "computed property names": https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names
},
this.filterHandler
);
}
};
private filterHandler: Response = async () => {
const { level, facility, host } = this.state.options
// ⮤ object destructuring: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring
if (!level || !facility || !host) {
// Don't fetch unless all options are present (remove this if
// it's okay to fetch with partial options)
return
}
const response = await fetch(
'http://egrde-tvm-aso1.de.egr.lan:3000/api/v1/search',
{
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(this.state.options)
}
);
};
您可以更改您的状态,使其具有一个收集所有选项的对象。然后在事件处理程序中,只需将选项分配给属性
键
。此外,您可能打算在事件处理程序中使用&&
而不是|
constructor(props) {
super(props);
this.state = {
options: {
level: undefined,
facility: undefined,
host: undefined
}
};
}
private optionFilterHandler = (option: string, key: string | number) => {
if (option && key) {
this.setState(
{
options: { ...this.state.options, [key]: option }
// copies the old options object and sets the property `key` to
// the value `option`
// Uses "computed property names": https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names
},
this.filterHandler
);
}
};
private filterHandler: Response = async () => {
const { level, facility, host } = this.state.options
// ⮤ object destructuring: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring
if (!level || !facility || !host) {
// Don't fetch unless all options are present (remove this if
// it's okay to fetch with partial options)
return
}
const response = await fetch(
'http://egrde-tvm-aso1.de.egr.lan:3000/api/v1/search',
{
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(this.state.options)
}
);
};
感谢您的帮助,问题已经解决。:)感谢您的帮助,问题已经解决。:)