当我尝试将它写到控制台时，React function 显示 object 为空

Question

I am using this constant function whenever an element in a sortable list is moved:

const arrayMoveMutate = (array, from, to) => {
    array.splice(
        to < 0 ? array.length + to : to,
        0,
        array.splice(from, 1)[0]
    );
};

const arrayMove = (array, from, to) => {
    array = array.slice();
    arrayMoveMutate(array, from, to);
    return array;
};

 const onSortEnd = React.useCallback(
        ({ oldIndex, newIndex }) => {
            setPlayer(player =>
                arrayMove(player, oldIndex, newIndex)
            );
            console.log('mock api POST to save new index positions: ', player);
            console.log('oldIndex: ', oldIndex);
            console.log('newIndex: ', newIndex);
        },
        []
    );

Here is the SortableList:

<SortableList player={player} onSortEnd={onSortEnd} />

Every time a move an element, I do see the oldIndex and newIndex in my console change.

However, 'player' is always empty.

How would I pass the 'player' object to onSortEnd so that I can do my api POST?

thanks!

Answer 1

player in the console.log statement is a reference to the hook value created in your useState hook. Hence add it to the callbacks deps as below to get the fresh value, else it will always be empty within the callback:

const onSortEnd = React.useCallback(({ oldIndex, newIndex }) => {
  setPlayer(player => arrayMove(player, oldIndex, newIndex));
  console.log("mock api POST to save new index positions: ", player);
  console.log("oldIndex: ", oldIndex);
  console.log("newIndex: ", newIndex);
}, [player]);

That said, this deps is only required for logging the value inside the callback. As you are passing function to setPlayer , it will always take the latest value of the state irrespective of the deps. Hence the state should be setting fine even with your code. If still facing issues, try setting the deps and try again.