javascript - React中添加新元素后不显示在列表中

Question

当用户单击加号按钮时，我希望任务数组显示为列表。我无法将任务推送到数组

import logo from './logo.svg';
import './App.css';
import { BsPlusLg } from "react-icons/bs";
import { useState } from 'react';

const App = () => {

  const items = ["Pizza", "Burger", "Shawarma", "Biryani", "Butter Naan", "Panner", "Chapathi"];

  let tasks = [];

  const [searchValue, setSearchValue] = useState("");

  const changeValue = (event) => {
    setSearchValue(event.target.value);
  }

  const searchedItems = tasks.filter((item) => {
    if(item.toLowerCase().includes(searchValue.toLowerCase())){
        return item;
      }
  })

  const handleClick = () => {
    if(items.length>0){
      tasks.push(items.pop());
    }
  }

单击加号按钮后，将项目添加到任务数组后，它们应显示为列表。

  return (
    <div className="App">
      <div className='navbar'>
        <input type="text" value={ searchValue } onChange={ changeValue } placeholder="Search"></input>
        {/* <div className="verticalLine"></div> */}
        <button onClick={ handleClick }><BsPlusLg /></button>
      </div>
      <hr/>
      <div className='list'>
        <ul>
          {(searchValue.length>0)&&(searchedItems.map((item) => {
            return <li key={item}>{item}</li>}))
          }
          {(searchValue.length===0)&&(tasks.map((item) => {
            return <li key={item}>{item}</li>
          }))
          }
        </ul>
      </div>
    </div>
  );
}

export default App;

当我注销正在推送的任务时，页面中任务中的元素不会显示。

Answer 1

单击按钮不会更新您的组件，因此会重新呈现您的列表。

如果可以的话，它将再次运行整个函数，甚至再次调用 lettasks = [];，这将重置您的整个列表。要更新列表或您需要的任何状态，您需要使用 useState 或类似的钩子(Hook)。

因为您还pop items 数组，所以您可能需要使用两个useState Hook 并更新它们。这些将为您处理内部状态，并且不会在重新渲染时丢失。请参阅https://reactjs.org/docs/hooks-state.html了解更多信息。解决方案可能如下所示:

import "./styles.css";
import {useState} from 'react'


const BsPlusLg = () => <span >+</span>

const App = () => {

  const [items, setItems] = useState( ["Pizza", "Burger", "Shawarma", "Biryani", "Butter Naan", "Panner", "Chapathi"]);
  const [tasks, setTasks] = useState([]);

  
  const [searchValue, setSearchValue] = useState("");

  const changeValue = (event) => {
    setSearchValue(event.target.value);
  }

  // searchedItems will be updated on each rerender
  const searchedItems = tasks.filter((item) => {
    if(item.toLowerCase().includes(searchValue.toLowerCase())){
        return item;
      }
  })

  const handleClick = () => {
    if(items.length === 0){
      // keep it simple and stop execution
      return;
    }
    
    // enforce a new reference
    let newItems = [...items];
   
    let item = newItems.pop();

    // enforce a new tasks reference
    let newTasks = [...tasks, item];
      
    setItems(newItems);
    setTasks(newTasks);


  }
  return (
    <div className="App">
      <div className='navbar'>
        <input type="text" value={ searchValue } onChange={ changeValue } placeholder="Search"></input>
        {/* <div className="verticalLine"></div> */}
        <button onClick={ handleClick }><BsPlusLg /></button>
      </div>
      <hr/>
      <div className='list'>
        <ul>
          {(searchValue.length>0)&&(searchedItems.map((item) => {
            return <li key={item}>{item}</li>}))
          }
          {(searchValue.length===0)&&(tasks.map((item) => {
            return <li key={item}>{item}</li>
          }))
          }
        </ul>
      </div>
    </div>
  );
}

export default App;

沙盒:https://codesandbox.io/s/confident-albattani-jf1z6f?file=/src/App.js:0-1655