Question

我有一个handleSubmit方法：

state = {
    code: null,
    participant: {},
    participantNotFound: false,
};

handleSubmit = (event) => {
    event.preventDefault();
    const {code} = this.state;

    axios.get(`/api/participant/${code}`)
        .then((response) => {
            const participant = response.data.participant;
            console.log(participant)
            this.setState({participant})
        })
        .catch(() => this.setState({participantNotFound: true}));

    console.log(this.state.participant) // THIS IS STILL EMPTY
};

这将在提交表单时触发：

<form method="POST" onSubmit={this.handleSubmit}>
    <div className="ui action input">
        <input type="text" placeholder="Enter code" name="code"/>

        <select className="ui compact selection dropdown" onChange={event => this.setState({selectedOption: event.target.value})}>
            <option value="participate">Participate!</option>
            <option value="check_status">Check status</option>
        </select>

        <button>Submit</button>
    </div>
</form>

我放置了一个console.log，它正确地输出了参与者，但是没有将参与者设置为我从响应中得到的参与者。

此后，我还有其他代码可以检查参与者是否存在，但是由于参与者永远不会被设置而无法正常工作。

这是为什么？

Answer 1

很可能已设置，但是您没有正确检查。 async / await的版本：

handleSubmit = async (event) => {
    event.preventDefault();
    const {code} = this.state;

    try {
        const response = await axios.get(`/api/participant/${code}`);
        const participant = response.data.participant;
        this.setState({participant});
    } catch (err) {
        this.setState({participantNotFound: true}))
    }
};

请记住，您将无法在setState之后立即检测到新状态。例如，您可以检查在componentDidUpdate或render中是否设置正确。或者，您可以在setState的回调函数中检查新状态：

this.setState({participant}, () => {
    console.log(this.state.participant);
});

请记住，axios是异步的，setState是异步的。

Get Request React

1 个答案: