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

Question

I'm trying to build a code that can or cannot receive querystrings. If it receives all querystrings, I want to execute a function:

  // 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();
    }
  }, []);

The initial state is the query state. What I'm doing is, on component mount, verify if there are query strings and change the component to match the query strings received.

The problem is, I never enter the last if (query.periodicity.== "" && query.stock !== "" && query.investment !== "") . I know it's because useState will update the state on the next component mount, and that useEffect is only running once, before useState updates the state. But how can I fix it without entering in a loop?

I can't put the query in the useEffect dependency array, because if the user fills all data and the query state becomes populated, I don't want to automatically run the simulate() function, because the user needs to click on a button. I just want to run it automatically if I received all the query strings needed when entering this page.

Thanks in advance!

Answer 1

You can set the state in the component function body and check it in the useEffect callback:

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>
  );
}