為什么我的 state 沒有使用 React Hooks 更新？

Question

我正在嘗試將我的 state 設置為從 API 獲取的數據。 但是，當我 console.log state （本實例中的items ）時，它返回一個空數組。

這是我的代碼：

const Search = () => {
  const apiKey = 'xxxxxxx';
  const [input, setInput] = useState('');
  const [items, setItems] = useState([]);

  const handleSubmit = (e) => {
    searchAPI();
  };

  const searchAPI = async () => {
    const res = await fetch(`http://www.omdbapi.com/?apikey=${apiKey}&s=${input}`);
    const data = await res.json();
    setItems([data.Search]);
    console.log(items)
  };

  return (
    <form>
      <input onChange={(e) => setInput(e.target.value)}></input>
      <Link to={{ pathname: '/results', state: items }}>
        <button type="submit" onClick={handleSubmit}>
          search
        </button>
      </Link>
    </form>
  );
};

Answer 1

因為 setState 是異步的

setState() 並不總是立即更新組件。 它可能會批量更新或將更新推遲到以后。 這使得在調用 setState() 之后立即閱讀 this.state 是一個潛在的陷阱

https://reactjs.org/docs/react-component.html#setstate

Answer 2

setState()將回調 function 作為第二個參數，這將確保更新 state。 對於鈎子，你需要做

useEffect(() => {
  console.log(items)
}, [items]);