时间戳

首页 > 解决方案 > 列表正在更新，但数据在 reactjs 中的 dom 上更新？

javascript - 列表正在更新，但数据在 reactjs 中的 dom 上更新？

问题描述

这是我创建 TODO 列表的代码，问题是当我添加一个项目时，列表正在更新，但是当我删除一个项目时，列表没有得到更新。

import React, { useEffect, useState } from 'react';
import './App.css';

function App(){

  const [item, setItem] = useState("");
  const [list, updateList] = useState([]);

  let todoList = <p>list is empty</p>
  //creating a list
  if(list.length!== 0){
    todoList =  list.map((res, index) =>{
    return <li key={index} onClick={() => deleteItem(index)}>{res}</li>;
    });
  }
  else{

    // adding an item in todo list

    todoList = <p>list is empty</p>
  }

 
  function incre(){
    let addItem = [];
    if(list){
      addItem = list;
      addItem.push(item);
    }
    else{
      addItem = item;
    }
    updateList(addItem);
    setItem("");
  }
  // deleting item from todo list
  function deleteItem(item){
    let updatedList = list;

    updatedList.splice(item, 1);
    console.log(list);
    updateList(updatedList);
  }
  // input query
  let query = (event) =>{
    const { value } = event.target;
    setItem(value);
  }

  return (
    <div className="App">
      <input 
        onChange={(e) => {query(e)}}
        value={item} />
      <button onClick={incre}>
        click me
      </button>
      <p>{item}</p>
      <ul>
        {todoList}
      </ul>
    </div>
  );
}

export default App;

标签： javascriptreactjsrxjs

解决方案

现在你正在改变你的状态。创建新变量并设置为您的状态不会创建新变量。如果你改变它，你也会改变原来的那个。所以，你应该避免这样做。

此外，pushandsplice方法会改变原始数组。同样，您应该避免使用这些方法。相反，您可以使用其他不会改变原始数组的方法。

要添加，您可以使用传播语法：

function incre(){
  updateList(prev => [...prev, item]);
  setItem("");
}

要删除，您可以使用filter：

function deleteItem(itemIndex){
  const updatedList = list.filter((_, index) => itemIndex !== index)
  updateList(updatedList);
}

推荐阅读