如何在useEffect内部使用useState，在组件挂载时访问更新后的useState值？

Question

我正在尝试构建一个可以或不能接收查询字符串的代码。如果它接收到所有的查询字符串，我想执行一个函数：

  // state for query
  const [query, setQuery] = useState({
    periodicity: "",
    stock: "",
    date: moment().subtract(1, "y"),
    investment: ""
  });


  // check if there are query strings
  function useQuery() {
    return new URLSearchParams(useLocation().search);
  }
  let qs = useQuery();
  let queries = {};

  // set query strings received
  useEffect(() => {
    if (qs.has("periodicity")) {
      queries.periodicity = qs.get("periodicity");
    }
    if (qs.has("start_date")) {
      queries.date = moment(qs.get("start_date"));
    }
    if (qs.has("symbol")) {
      queries.stock = { value: qs.get("symbol"), label: qs.get("symbol") };
    }
    if (qs.has("investment")) {
      queries.investment = qs.get("investment");
    }
    setQuery({ ...query, ...queries });
    if (
      query.periodicity !== "" &&
      query.stock !== "" &&
      query.investment !== ""
    ) {
      simulate();
    }
  }, []);

initial state是query状态。我所做的是，在组件挂载时，验证是否有查询字符串，并更改组件以匹配接收到的查询字符串。

问题是，我从不输入最后一个if (query.periodicity !== "" && query.stock !== "" && query.investment !== "")。我知道这是因为useState将在下一次组件挂载时更新状态，而useEffect在useState更新状态之前只运行一次。但是我如何才能在不进入循环的情况下修复它呢？

我不能将query放入useEffect依赖项数组中，因为如果用户填充了所有数据并且query状态被填充，我不想自动运行simulate()函数，因为用户需要单击一个按钮。我只想在进入此页面时收到所需的所有查询字符串时自动运行它。

提前感谢！

Answer 1

您可以在组件函数体中设置状态，并在useEffect回调中进行检查：

function App(props) {
  const initialState = {
    periodicity: "",
    stock: "",
    date: "2019-01-01",
    investment: ""
  };

  let qs = useQuery();
  let queries = {};

  if (qs.has("periodicity")) {
    queries.periodicity = qs.get("periodicity");
  }
  if (qs.has("start_date")) {
    queries.date = qs.get("start_date");
  }
  if (qs.has("symbol")) {
    queries.stock = { value: qs.get("symbol"), label: qs.get("symbol") };
  }
  if (qs.has("investment")) {
    queries.investment = qs.get("investment");
  }

  const [query, setQuery] = useState(
    receivedQueryString(queries) ? queries : initialState
  );

  /*
  *  Rest of the component implementation
  */

  function receivedQueryString(query) {
    return (
      query.periodicity != "" && query.stock != "" && query.investment != ""
    );
  }

  useEffect(() => {
    if (receivedQueryString(query)) {
      simulate();
    }
  });

  function simulate() {
    props.history.push(
      `/?periodicity=${query.periodicity}&start_date=${query.date}&symbol=${
        query.stock.value
      }&investment=${query.investment}`
    );
    // calls API
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}