javascript - React hooks 状态不使用最新版本

Question

我有下面的代码，我想在其中创建标签列表。在此示例中，我在 setAllTags() 中获取标签列表，然后在 setAvailableTags() 中获取一些可用标签。

然后我遇到的问题是，当运行 setAvailableTags() 时，它将删除在 setAllTags() 中获取的标签。当 setAvailableTags() 设置其状态时，似乎不会使用我在 setAllTags() 中设置的状态。

知道我能做些什么来解决这个问题吗？

https://codesandbox.io/s/rj40lz6554

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const Search = () => {
  const [tags, setTags] = useState({
    all: [],
    available: []
  });

  const setAllTags = () => {
    const all = ["tag 1", "tag 2", "tag 3"];
    const newValue = {
      ...tags,
      all
    };
    console.log("setting all tags to ", newValue);
    setTags(newValue);
  };

  const setAvailableTags = () => {
    const available = ["tag 1", "tag 2"];
    const newValue = {
      ...tags,
      available
    };
    console.log("setting available tags to", newValue);
    setTags(newValue);
  };

  useEffect(setAllTags, []);
  useEffect(setAvailableTags, []);

  return (
    <div>
      <div>
        <select placeholder="Tags">
          {tags.all.map((tag, i) => (
            <option key={tag + i} value={tag}>
              {tag}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <h1>Hello React!</h1>
      <Search />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("app"));

控制台记录为

setting all tags to Object {all: Array[3], available: Array[0]}
setting available tags to Object {all: Array[0], available: Array[2]}

Answer 1

setTags 改变内部的 React 状态，并不会直接改变 tags 的值。所以直到下一次渲染它才会更新。

改用此调用:

setTags(currentTags => ({...currentTags, all}));

并对available执行相同的操作。