Reactjs REACTIONEasySORT返回.map错误

发布于10月25日

我希望你能帮助我，我一直在努力寻找awnser，但我没有找到它与我正在使用的库堆叠在一起

我正在try 使用JS实现Reaction-Easy-Sort

const [items, setItems] = useState(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'])

const onSortEnd = ({oldIndex, newIndex}) => {
  setItems(({items}) => ({
    items: arrayMove(items, oldIndex, newIndex),
  }));
};

要返回，请执行以下操作:

<SortableList onSortEnd={onSortEnd} className="list" draggedItemClassName="dragged">
  {items.map((item) => (
     <SortableItem key={item}>
        <div className="item">{item}</div>
     </SortableItem>
   ))}
</SortableList>

However when dragging on of the values from place to place I get the following error:

推荐答案

在您的‘onSortEnd’函数中，您将Items状态设置为具有属性项的对象，该对象是您的数组(您不能映射到Object上)，并且您还将状态分解为Object，但状态没有属性项.相反，您应该将状态设置为如下所示的数组(假设您的‘arrayRemove’函数返回一个数组)，并且根据文档，如果使用WITH REACT或创建数组的浅层副本，则应该使用arrayMoveImmutable，并且库的onSortEnd不使用Object作为参数:

import { arrayMoveImmutable } from 'array-move'

const onSortEnd = (oldIndex, newIndex) => {  
 setItems((items) => {
   return arrayMoveImmutable(items, oldIndex, newIndex)
   // or shallow copy
  return arrayMove([...items], oldIndex, newIndex)
});

或一行:

const onSortEnd = (oldIndex, newIndex) =>                
  setItems((items) => arrayMoveImmutable(items, oldIndex, newIndex))

Reactjs相关问答推荐

Reactjs REACTIONEasySORT返回.map错误

推荐答案

Reactjs相关问答推荐

从另一个组件更改组件中const的状态

如何使用next.js以DOM为目标在映射中使用Ref

后端关闭时如何在REACTION AXIOS拦截器中模拟数据？

Next.js：提交表单时状态尚未就绪

React Context未正确更新

更新对象状态的父数组时记住子组件

React redux 工具包 useGetFilterProductsQuery 和 useGetFilterProductsByCategoriesQuery 未定义为函数

如何管理可重用无线电输入的 React 状态？

在MongoDB中，如何获取最后N条记录中字段不为空或不为空字符串的数据

React中useAuthenticator的authState在成功登录后仍保持未认证状态 - 需要强制刷新

ReactJS中使用setState方法时，Context内部的State未进行更新

如何覆盖自定义 MUI 手风琴的样式(分隔线和折叠图标)

使用 axios 响应路由 Dom 操作

来自一个自定义 React Native 组件的样式从另一个自定义组件移除样式

添加新行时自动打开可扩展表格(Antd 表格，ReactJS)

为什么此代码中的 useState 不更新(文本更新但 id 不更新)？

react 页面更新

如何不旋转 mui 自动完成弹出图标？

axios post方法中的请求失败，状态码为500错误

错误未捕获的错误：[App] 不是组件. 的所有子组件必须是或