React Hooks，setState 不适用于 async.map 调用

Question

So, I'm trying to change a state in my component by getting a list of users to call an api.get to get data from these users and add on an new array with the following code:

function MembersList(props) {
    const [membersList, setMembersList] = useState(props.members);
    const [devs, setDevs] = useState([]);

    useEffect(() => {
        let arr = membersList.map((dev) => {
            return dev.login;
        });

        handleDevs(arr);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [membersList]);

    function handleDevs(membersArr) {
        membersArr.map(async (dev) => {
            let { data } = await api.get(`/users/${dev}`);

              /** If i console.log data here i actualy get the data from the user 
                  but i think theres something wrong with that setDevs([...devs, data]) call
              **/

            setDevs([...devs, data]);
        });
    }

but the devs state always return an empty array, what can I do to get it to have the actual users data on it?

Answer 1

You need to understand how React works behind scenes.

In short, it saves all the "sets" until it finishes the cycle and just after that actually update each state.

I think that why you do not see the current state updated.

For better understanding read this post: Medium article

Answer 2

The issue is that setDevs uses devs which is the version of devs when handleDevs is defined. Therefore setDevs will really only incorporate the data from the last time setDevs is called.

To fix this you can use the callback version of setDevs , like so:

setDevs(prevDevs => [...prevDevs, data])

Also since you are not trying to create a new array, using map is not semantically the best loop choice. Consider using a regular for loop or a forEach loop instead.

Answer 3

The issue you were having is because you were setting devs based on the data from the original render every time due to the closure around handleDevs function. I believe this should help take care of the issues you were having by using the callback method of using setDevs. This also takes care of some issues with the dependency arrays and staleness in the useEffect hook. Typically using // eslint-disable-next-line react-hooks/exhaustive-deps should be your last resort.

function MembersList(props) {
    // this isn't needed unless you are using it separately
    const [membersList, setMembersList] = useState(props.members);
    const [devs, setDevs] = useState([]);

    useEffect(() => {
        let arr = membersList.map((dev) => dev.login);
        arr.forEach(async (dev) => {
            let { data } = await api.get(`/users/${dev}`);
            setDevs((devs) => [...devs, data]);
        })
    }, [membersList]);
}

Answer 4

you call setDevs in the async execution loop. Here is the updated handleDevs function.

function handleDevs(membersArr) {
    const arr = membersArr.map(async (dev) => {
        let { data } = await api.get(`/users/${dev}`);
        return data;
          /** If i console.log data here i actualy get the data from the user 
              but i think theres something wrong with that setDevs([...devs, data]) call
          **/
    });
    setDevs([...devs, ...arr]);
}