反应阵列状态过滤器清除阵列

debugcn 发表于 Dev

Cagdas Akdemir

当我按下删除按钮时，我想更新App.js中的itemListState。但是它将删除状态中的所有内容。我的“ itemDeleteHandler”函数出了什么问题？索引号和ID匹配。过滤器功能应做的工作。

import React, { useState } from 'react';
import './App.css';
import UserInput from './components/UserInput';
import ItemList from './components/ItemList';

const App = (props) => {
  const [itemListState, setItemListState] = useState([]);

  const userInputHandler = (newUserInput) => {
    setItemListState((prevState) => ([
      ...prevState, newUserInput
    ]))
  }

  const itemDeleteHandler = (id) => {
    setItemListState((prevState) => ([
      prevState.filter((item, index) => {
        // DELETES ALL THE ITEMS WHY?
        return parseInt(id) !== index;
      })
    ]));
    console.log(itemListState);
  }

  return (
    <div>
      <UserInput onAddUserInput={userInputHandler} />
      <hr className="item__hr" />
      <ItemList userInputProp={itemListState} onDeleteItem={itemDeleteHandler} />

    </div>
  );
}

export default App;

AKX

删除处理程序中有一对多余的括号，因此最终得到一个列表，其中包含其余项。

你想要

const itemDeleteHandler = (id) => {
  setItemListState((prevState) =>
    prevState.filter(
      (item, index) =>
        parseInt(id) !== index,
    ),
  );
};

代替。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。