javascript - 以新顺序反应重新渲染表
问题描述
我设计了一个 React 组件,它以块格式显示宠物商店的待办事项列表,以便用户可以在类别块中组织待办事项,而不仅仅是无组织的待办事项列表。您可以在块列表的开头、中间或末尾的任何位置添加块,这在后端可以正常工作,但是,在测试添加功能时,而不是在您选择的任何地方添加块,我的表始终如一即使在组件状态下顺序正确,也将它们添加到表的底部。
这是组件代码:
import React, { useEffect, useContext, Fragment } from 'react';
import ManagerContext from '../../../context/manager/managerContext';
import M from 'materialize-css';
import Todo from './Todo';
const Open = () => {
const managerContext = useContext(ManagerContext);
const {
openBlocks,
openTodos,
addNewBlock,
} = managerContext;
useEffect(() => {
M.AutoInit();
// eslint-disable-next-line
}, [openBlocks]);
return (
<div>
<h2>Opening Tasks</h2>
<table>
<tbody>
{openBlocks !== null &&
openBlocks.map((block) => (
<Fragment key={block.blockNum}>
<tr>
<td className="filler">
<button
className="btn btn-primary btn-block"
onClick={() => {
addNewBlock('Open', block.blockNum, openBlocks);
}}
>
{block.blockNum === 1
? `Add new block above Block #${block.blockNum}`
: `Add new block between Block #${
block.blockNum - 1
} & Block #${block.blockNum}`}
</button>
</td>
<td className="filler" colSpan="2"></td>
</tr>
<tr>
<td className="block-filler text-center">
<b>Block #{block.blockNum}</b>
</td>
<td className="block-filler text-center" colSpan="2">
<button className="btn btn-danger">Remove Block</button>
</td>
</tr>
<tr>
<th>Description</th>
<th>Category</th>
<th></th>
</tr>
{openBlocks.map((b) =>
b.todos.map(
(todo) =>
todo.block === block.blockNum && (
<Todo key={todo.id} todo={todo} />
)
)
)}
<tr>
<td className="filler">
<select name="addToBlock" id="addToBlock" defaultValue="">
<option value="" disabled>
Assign To-Do to Block #{block.blockNum}
</option>
{openTodos !== null &&
openTodos.map(
(t) =>
t.block === 0 && (
<option key={t.id} value={t.id}>
{t.todo} ({t.category} Task)
</option>
)
)}
</select>
</td>
<td className="filler" colSpan="2"></td>
</tr>
{block.blockNum === openBlocks.length && (
<tr>
<td className="filler">
<button className="btn btn-primary btn-block">
Add new block below Block #{block.blockNum}
</button>
</td>
<td className="filler" colSpan="2"></td>
</tr>
)}
</Fragment>
))}
</tbody>
</table>
</div>
);
};
export default Open;
这是openBlocks
从后端加载数据时的状态:
[
{blockNum: 1, todos: Array(1)}
{blockNum: 2, todos: Array(4)}
{blockNum: 3, todos: Array(2)}
{blockNum: 4, todos: Array(1)}
{blockNum: 5, todos: Array(2)}
{blockNum: 6, todos: Array(6)}
{blockNum: 7, todos: Array(1)}
]
这是浏览器中的组件:
如您所见,它将 的内容加载openBlocks
到按顺序编号的块中。
使用“在 Block #1 上方添加新块”按钮时,它会正确显示在开头的状态:
[
{blockNum: 1, todos: Array(0)}
{blockNum: 2, todos: Array(1)}
{blockNum: 3, todos: Array(4)}
{blockNum: 4, todos: Array(2)}
{blockNum: 5, todos: Array(1)}
{blockNum: 6, todos: Array(2)}
{blockNum: 7, todos: Array(6)}
{blockNum: 8, todos: Array(1)}
]
但是,该组件会在末尾加载新块。
我觉得问题在于如何呈现 html 表,因此尝试将新数据添加到已建立的表中需要操作 DOM。我不确定如何进行。任何帮助将不胜感激。
解决方案
好吧,我做了一个沙箱,它工作得很好。问题与逻辑有关,您只需要blockNum
在插入之前找到索引。
推荐阅读
- ios - Swift 如何删除 searchController 底部边框?
- javascript - Javascript - 类中的窗口调整大小事件使类属性未定义
- c# - 在 .NET 中通过 PipeReader 读取 SSL
- node.js - Ubuntu/基准本地主机(请耐心等待)...apr_socket_recv:连接被拒绝(111)
- javascript - '+ ((visible && "is-active") || "")' 是一个好习惯吗?
- python - 基于多个属性的智能合约中的搜索记录
- node.js - 如何从 JSON 解析中的 promise 获得响应?
- c++ - 为什么priority_queue pop函数不删除top元素?
- jquery - 为什么 JQuery .hide() 函数不能与引导微调器一起使用?
- django - Django FactoryBoy TestCase 处理嵌套对象创建