按索引从 useState 数组中删除元素

Question

解决方案：更新输入元素的键值以刷新默认值 => 输入元素的内容。 从数组中删除一个元素 DID 工作。 感谢您的帮助： 源代码：https://thewebdev.info/2022/05/12/how-to-fix-react-input-defaultvalue-doesnt-update-with-state-with-javascript/#:~:text =state%20with%20JavaScript%3F-,To%20fix%20React%20input%20defaultValue%20doesn't%20update%20with%20state,default%20value%20of%20the%20input 。

我的代码中有一个 useState 数组，它代表学生列表： const [students, setStudents] = useState([""]); 这个数组被映射到学生元素： {students.map((student, index) => <Student setStudents={setStudents} students={students} id={index} key={index} content={student} />)}我还有一个{students.map((student, index) => <Student setStudents={setStudents} students={students} id={index} key={index} content={student} />)}元素，它将学生添加到数组中。

function AddStudent(props) {

    const {setStudents} = props;

    return (
        <button className="change-student add-student" onClick={() => {
            setStudents((students) => [...students, ""])
        }}>
            +
        </button>
    );
}

RemoveStudent 组件应该通过它在数组中的索引来删除一个学生。 我尝试了许多不同的方法，但没有一个能正常工作。 我怎样才能让它工作？ 这是我的代码：

function RemoveStudent(props) {
    const {students, setStudents, id} = props;

    return (
        <button className="change-student remove-student" onClick={() => {
            let data = students;
            if(id > -1) {
                data.splice(id, 1);
            }
            console.log(data)
            // setStudents(data)
            // alternative:
            // setStudents(students.filter(index => index !== id)); // removes the last element in the list
            // doesn't work properly
        }}>
            -
        </button>
    )
}

谢谢你的帮助！

Answer 1

您需要先复制students数组，然后尝试按索引删除学生。 我假设id您的意思是删除学生的索引。 然后你可以尝试类似的东西：

function RemoveStudent(props) {
    const {students, setStudents, id} = props;

    return (
        <button
            className="change-student remove-student"
            onClick={() => {
                if(id > -1) {
                    const data = [...students]; // making a copy
                    data.splice(id, 1);         // removing at index id
                    console.log(data)
                    setStudents(data)
                }
            }}
        >
            -
        </button>
    )
}

使用array.filter()您将回调传递给filter()方法的方式有误。 请尝试以下方法：

setStudents(students.filter((,index) => index !== id));

请注意，索引是回调的第二个参数，所以我在索引之前使用了, 。

Answer 2

在@Irfanullah Jan 的回答之后，您应该确保如何向学生展示。

这是一个简单的例子：

const [students, setStudents] = useState([1, 2, 3]);

  return (
    <div>
      {students.map((student, index) => {
        return <div>{student}</div>; // show the value not the index
      })}
      <button
        onClick={() => {
          let id = 1;
          const copy = [...students];
          copy.splice(id, 1)
          console.log(copy)
          setStudents(copy);
        }}
      >
        -
      </button>
    </div>
  );

上面的代码会删除“index==1”的学生

Answer 3

这里需要注意两点：

在更新反应 state arrays 时，使用返回新数组的方法（ map ， filter ， slice ， concat ），
而不是那些修改现有数组（ splice ， push ， pop ， sort ）。

在使用之前的值更新 React state 时，回调参数应该用于 state 设置器。 否则你可能会得到陈旧的值。 （ 请参阅 React 文档）。

if(id > -1) {
    setStudents(students=> students.filter((s,i)=>(i != id)))
}

有关如何更新 React state arrays 的完整参考，请参阅本文。