如何在useState中使用函数

Question

我正在使用React Sortable HOC来移动项目。我的初始状态是一个空数组，我需要使用React Sortable中的函数更新状态。

这是React Sortable HOC的原始代码片段

onSortEnd = ({oldIndex, newIndex}) => {
    this.setState(({items}) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };

我的状态和功能看起来像这样

const [colors, setColors] = useState([])

function onSortEnd({ oldIndex, newIndex }) {
  setColors([...colors, ({ colors }) => ({
     colors: arrayMove(colors, oldIndex, newIndex)
  })]);
};

最终发生的是没有错误，但是当我尝试排列任何现有颜色时，会添加更多颜色。

Answer 1

根据提到的要求，我认为你不需要回调格式setState，你可以简单地做

const [colors, setColors] = useState([])

function onSortEnd({ oldIndex, newIndex }) {
  const newColors = arrayMove(colors, oldIndex, newIndex);
  setColors(newColors);
};