為什么我的狀態值在獲取 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

這是因為 this.setState 不是立即更改，有時需要一些時間來設置它所以你不應該使用this.state.data而是使用this.state.instant_data代替：

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

Answer 2

從文檔中；

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