反应钩子状态不使​​用最新的

Question

I have the below code where I want to create a list of tags. In this example I'm fetching a list of tags in setAllTags() and then a number of available tags in setAvailableTags() .

Then problem that I have is that when setAvailableTags() is run it will remove the tags that was fetched in setAllTags() . It seems like the state that I set in setAllTags() is not used when setAvailableTags() is settings it's state.

Any idea what I can do to fix this?

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

The console is logged with

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 changes the internal react state and doesn't change the value of tags directly. So it doesn't get updated till the next render.

Use this call instead:

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

And do the same with available .

Answer 2

In the react docs, you can see how useEffect works ( https://reactjs.org/docs/hooks-effect.html )

Experienced JavaScript developers might notice that the function passed to useEffect is going to be different on every render. This is intentional. In fact, this is what lets us read the count value from inside the effect without worrying about it getting stale. Every time we re-render, we schedule a different effect, replacing the previous one. In a way, this makes the effects behave more like a part of the render result — each effect “belongs” to a particular render. We will see more clearly why this is useful later on this page.

What this means, is that each side effect within your render function will only have access to the initial result of useState . Remember that react states are immutable, so it doesn't make sense for you to update the state, and then try and use the updated version within the same render cycle.

You can see this by simply calling:

setTags({ all: ['test'] })
console.log(tags)

You should notice that tags does not change at all.

Personally I would use hook conventions here, and separate your useState out into two separate variables:

const [allTags, setAllTags] = useState([])
const [availableTags, setAvailableTags] = useState([])

This makes your effects more explicit (as they only need to update the one variable), and improves readability.

Answer 3

from: https://reactjs.org/docs/hooks-reference.html#usestate

Unlike the setState method found in class components, useState does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax:

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

Another option is useReducer, which is more suited for managing state objects that contain multiple sub-values.

And if you want to setAvailableTags() to be based on setAllTags() you should do useEffect(setAvailableTags, [tags.all])

working example: https://codesandbox.io/s/5vzr20x99p?from-embed

Answer 4

The problem is that when you useEffect with second parameter [], the function will be called only the first time the component is rendered. But because you use setState in it the component is rerendered, but the useEffect doesn't get called and so it won't update properly. One way you can fix your problem is by not using setState in each of the function but instead return the data to a another function which then sets the state like so.

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"];
    return all;
  };

  const setAvailableTags = () => {
    const available = ["tag 1", "tag 2"];
    return available;
  };

  useEffect(() => {
    const all = setAllTags();
    const available = setAvailableTags();
    setTags({
      all: all,
      available: available
    });
  }, []);

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

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

And you can use Promise.all() if you need to fetch the data from an API.

Answer 5

For the initial render, your tags is

{
  all: [],
  availableTags:[]
}

So for both the useEffect functions update this initial object. And your useEffect functions are not called on state update.

You can use them like following:

const setAvailableTags = () => {
  const available = ["tag 1", "tag 2"];
  setTags(prevTags => ({...prevTags, available}));
};

useEffect(setAllTags, []);
useEffect(setAvailableTags, [tags.all]);