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

Answer 2

需要返回列表，而不是setColors()中的对象。

这应该有效：

const [colors, setColors] = useState([]) // a list not an object

function onSortEnd({ oldIndex, newIndex }) {
  setColors(( colors ) => (
    arrayMove(colors, oldIndex, newIndex)  // return list
  ));
};

Answer 3

您似乎正在使用新的数组对象更新colors状态，该对象包含散布到该数组中的现有颜色（即[...colors,）以及从{{1 }}：

arrayMove()

我的理解是，要复制“非挂钩”组件的行为，您需要将状态的形状更新为const [colors, setColors] = useState([]) function onSortEnd({ oldIndex, newIndex }) { /* Look like a problem: Colors state updated to include existing ...colors, and result of function */ setColors([...colors, ({ colors }) => ({ colors: arrayMove(colors, oldIndex, newIndex) })]); };，删除散布运算符，然后返回{ colors : [] }对象直接保持一致的状态形状：

{ colors : [..] }

Answer 4

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

setColors([...colors, ({ colors })
               |______________________ spreading previous values to new array

因为要散布先前的颜色，然后添加从arrayMove返回的值（如果只想移动颜色），则可以这样做

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

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

如何在useState中使用函数

4 个答案: