React中XMLHttpRequest异步请求结果无法存入state的问题

这是因为XMLHttpRequest是异步操作：调用request.send()后，浏览器会在后台发送请求，代码会立刻继续执行后续的console.log(result)和this.setState，此时请求还未完成，result自然还是初始的空字符串。只有当请求成功返回后，onreadystatechange回调才会触发，这时候才会给result赋值。

把更新组件state的逻辑放到请求成功的回调内部，同时更新counter时推荐使用函数式setState（避免依赖旧state值导致的更新异常）：

apirequest = () => {
    let input_search = document.getElementById("search-input-id").value;
    let linkrequest = 'Thelinkfortherequest' + input_search;
    let request = new XMLHttpRequest();
    request.open("get", linkrequest);
    request.send();
    // 用箭头函数保证this指向组件实例
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === 200){
            const result = JSON.parse(request.response);
            console.log(result);
            // 在这里更新state
            this.setState(prevState => ({
                jsondata: result,
                counter: prevState.counter + 1
            }));
        }
    }
}

React项目中更推荐用现代的fetch API替代XMLHttpRequest，代码更简洁易读：

apirequest = async () => {
    const input_search = document.getElementById("search-input-id").value;
    const linkrequest = 'Thelinkfortherequest' + input_search;
    try {
        const response = await fetch(linkrequest);
        if (!response.ok) {
            throw new Error('请求失败');
        }
        const result = await response.json();
        // 更新state
        this.setState(prevState => ({
            jsondata: result,
            counter: prevState.counter + 1
        }));
    } catch (error) {
        console.error('请求出错:', error);
    }
}

• 尽量避免用document.getElementById获取输入值，React中推荐使用受控组件：给input绑定value和onChange，将输入值存在组件state中，更符合React数据流规范。
• 务必添加错误捕获逻辑（比如请求失败、状态码非200的情况），避免程序异常崩溃。

内容的提问来源于stack exchange，提问作者juli_crafter