时间戳

首页 > 解决方案 > 如何添加新项目并在没有超时的情况下呈现它？反应

javascript - 如何添加新项目并在没有超时的情况下呈现它？反应

问题描述

我有这个代码，基本上是为了向列表中添加一个新项目。

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;

如果我删除超时功能和“戴尔”状态，列表会不断更新，但不会在渲染中更新。我想知道如何在没有这种荒谬的超时和“戴尔”状态的情况下呈现更新的列表。

标签： javascriptreactjswebreact-hooks

解决方案

代码是同步的handleAdd，因此在执行时尝试更改显示毫无意义。会发生什么：

  • 您将状态更改为false
  • 您将状态更改为true相同的同步功能
  • React 介入并比较之前和之后的状态：true === true计算结果为true. 状态没有改变，所以 React 不会重新渲染组件。

此外，在编写此代码时，const newList = list;您并没有按照您应该做的那样克隆状态，您只需在同一个列表上创建一个新的引用。

改为这样写：

const newList = [...list];

推荐阅读