如何添加新项目并在没有超时的情况下进行渲染?反应

Question

我有这段代码，基本上是用来向列表中添加新项的。

import './styles/app.css'
import {useState, useEffect} from 'react'

const initialList = [
{title: 'Group 1', items: ['Item 1', 'Item 2', 'Item 3']},
{title: 'Group 2', items: ['Item 1', 'Item 2']}
]
function App() {
const [dale, setDale] = useState(true);
const [list, setList] = useState(initialList);

const handleAdd = (e)=>{
setDale(false);
const newList = list;
newList[e.target.parentNode.id-1].items.push('New');
setList(newList);
setTimeout(() => {
setDale(true);
}, 1);

}
return (<div>{dale ? <div className="App" key="app">
{list.map((group, groupI)=>{
return (
<div id={groupI+1} key={groupI+1} className="dnd-group">
<div className="dnd-title">{group.title}</div>
{group.items.map((item, itemI)=>{
return(
<div draggable key={itemI+1}className="dnd-item">
Item {itemI+1}
</div>)
})}
<div className="dnd-añadir-item" onClick={handleAdd}>Add</div>
</div>
)
})}
</div>:<div>No vuic</div> }</div>
);

}

export default App;

如果我删除了超时函数和"dale"状态，则列表会不断更新，但不会在渲染中更新。我想知道如何在没有这种荒谬的超时和"dale"状态的情况下呈现更新后的列表。

Answer 1

handleAdd代码是同步的，因此在执行时尝试更改显示是没有意义的。发生的是：

• 您将状态更改为false
• 在同一同步函数中将状态更改为true
• React进入并比较之前和之后的状态：true === true，评估为true。状态不变，因此React不会重新渲染组件

此外，在编写这个const newList = list;时，您并没有像预期的那样克隆状态，您只是在同一列表上创建了一个新的引用。

改为写这个：

const newList = [...list];

Answer 2

我看到了"dale"；真的没有必要，试试下面的：

...
const [list, setList] = useState(initialList ?? []);
const handleAdd = (e)=>{
const newList = list;
newList[e.target.parentNode.id-1].items.push('New');
setList(newList);
}
return (
<div>
{ list.length > 0 ? (
list.map((group, groupI)=> {
return (
<div id={groupI+1} key={groupI+1} className="dnd-group">
<div className="dnd-title">{group.title}</div>
{group.items.map((item, itemI)=>{
return(
<div draggable key={itemI+1}className="dnd-item">
Item {itemI+1}
</div>)
})}
<div className="dnd-añadir-item" onClick={handleAdd}>Add</div>
</div>
)
})
) : (
<div>No vuic</div>
)}
</div>
)

对于initialList ?? []，我假设initialList可以是undefined或null，希望这能奏效，请告诉我。