为什么我的状态值在抓取url时没有更新

Question

我想获取数据时，搜索按钮被点击，为此我做了一个函数，我改变了数据的状态，之后我获取数据。但问题是在抓取链接，我提供了，它是采取该数据状态的初始值，而不是值，我已经改变搜索按钮点击后。代码:

<form className="d-flex">
<input
onChange={(e) =>
this.setState({ instant_data: e.target.value })
}
className="form-control me-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button
className="btn btn-outline-success"
type="submit"
onClick={this.searchNews}
>
Search
</button>
</form>

constructor() {
super();
this.state = {
instant_data: "",
data: "",
search_data: [],
};
}

searchNews = async (e) => {
e.preventDefault();
this.setState({
data: this.state.instant_data,
});
const link = `https://newsapi.org/v2/everything?q=${this.state.data}&apiKey=API_KEY`;
const raw_data = await fetch(link);
const data = await raw_data.json();
console.log(data);
};

Answer 1

来自文档;

setState()不会立即改变this.state，而是创建一个挂起的状态转换。调用此方法后访问this.state可能会返回现有值。对setState的调用不能保证同步操作，为了提高性能，可以批量调用。

建议→传递回调函数:

this.setState({
data: this.state.instant_data,
}, () => {
const link = `https://newsapi.org/v2/everything?q=${this.state.data}&apiKey=API_KEY`;
const raw_data = await fetch(link);
const data = await raw_data.json();
console.log(data);
});

Answer 2

这是因为。setState不是立即改变，有时需要一些时间来设置它，所以你不应该使用this.state.data，而是使用this.state.instant_data，如:

const link = `https://newsapi.org/v2/everythingq=${this.state.instant_data}&apiKey=API_KEY`;

Answer 3

将输入改为:

<input
onChange={(e) => this.setState({ instant_data: e.target.value })}
className="form-control me-2"
type="search"
placeholder="Search"
aria-label="Search"
value={this.state.instant_data} <--- added this here
/>

并将searchNews函数更改为:

searchNews = async (e) => {
e.preventDefault()
const link = `https://newsapi.org/v2/everything?q=${this.state.instant_data}&apiKey=API_KEY`
const raw_data = await fetch(link)
const data = await raw_data.json()
console.log(data)
}

依据

// this is async operation
this.setState({
data: this.state.instant_data,
});

所以你最终会先调用然后更新状态变量data