Question

我想显示数据库中的数据，我正在使用带有来自动态选择标签的参数的Axios请求，该请求已发送和接收，但我的自定义显示组件未随信息更新。

我有一个工作类似的代码，这就是为什么我要努力理解为什么这个代码不起作用的原因。

Axios请求更新状态，这将触发重新渲染，如您所见，我已经放置了更新，并在其中出现了this.render（）强制发生了小故障。

有人可以指出新手的错误吗？

searchByRef(refNum){
    axios.get("http://"+Constants.api+"/IndividualProject/api/game/getAGame/"+ refNum).then(response => {
            this.setState({
                data: response.data
            });
            console.log("Request Sent")

    });
    console.log(this.state.data);
    this.render();
}

handleChange = (event) => {
    console.log(event.target.value);
    this.searchByRef(event.target.value);
}

动态设置上一个请求中的选择标签

getRefs() {
    let optRefs = [];
    let dataRefs = [];
    for (let i = 0; i < this.state.games.length; i++) {
        dataRefs.push(this.state.games[i].reference);
    }
    dataRefs = dataRefs.unique();
    for (let j = 0; j < dataRefs.length; j++) {
        optRefs.push(<option value={dataRefs[j]}>{dataRefs[j]}</option>)
    }
    return <select id="refNum" name="refs" onChange={this.handleChange}>{optRefs}</select>;
}

渲染方法

render() {
    return (
        <div className="search">
            <div id="searchCriteria">
                <div>Select Reference</div>{this.getRefs()}
            </div>
            <div id="searchContent">
                <GameDisplay data={this.state.data}/>
            </div>
         </div>
    );
}

}

Answer 1

由于axios是一个异步调用，因此在axios调用完成之前会调用this.render（）方法。您应该使用

axios.get("http://"+Constants.api+"/IndividualProject/api/game/getAGame/"+ refNum).then(response => {
            this.setState({
                data: response.data
            });
            this.render();
            console.log("Request Sent")

    });

从axios获取请求呈现动态数据时遇到麻烦，具体取决于选择项

1 个答案: