每个选择选项的反应 API 调用

Posted 2023-03-13

【中文标题】每个选择选项的反应 API 调用

【英文标题】：React API call for each selection option

【发布时间】：2020-04-24 10:31:42

【问题描述】：

我有这个接收选择选项值的功能。 此外，我有 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 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() 中的所有三个选项，因为我只得到一个选项值 每次我选择选项时，如何检查选项值是否属于级别、设施或主机。

【参考方案1】：

您可以更改您的状态以拥有一个收集所有选项的对象。然后在事件处理程序中，您可以将选项分配给属性key。此外，也许您打算在事件处理程序中使用&& 而不是||？

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)
        
    );
;

【讨论】：

感谢cubrr的帮助，问题已解决。 :)