reactjs - 状态变量在功能组件中有错误的值

问题描述

我试图在表单中添加和删除输入框。我将用 useState 钩子控制这个盒子。我对添加状态变量没有任何问题，但是当我想从状态变量中删除时，状态变量的值错误。

import React, { useState } from 'react';
export default function Addable() {
  const [element, setElement] = useState([]);
  function add() {
    const list = [...element];
    const length = element.length;
    list.push(
      <React.Fragment>
        <input key={length} />
        <button onClick={()=>{_delete(length)}}>delete</button>
      </React.Fragment>,
    );
    setElement(list);
  }
  function _delete(index) {
    //****element has wrong value here****//
    const list = [...element];
    list.splice(index, 1);
    setElement(list);
  }
  return (
    <React.Fragment>
      <button onClick={add}>add Element</button>
      {element}
    </React.Fragment>
  );
}

标签： reactjsreact-hooksreact-functional-component

切片函数不会改变list数组

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
animals.slice(2)
console.log(animals);

您可能想改用splice，以防止关闭问题，传递一个函数来settlement设置当前状态的状态

function _delete(index) {
    //****element has wrong value here****//
    console.log(element);
    setElement((currentEl) => {
      const list = [...currentEl];
      list.splice(index, 1);
      return list
    });
  }

注意：如果使用不受控制的输入组件，则需要为输入生成唯一的 id 并将其设置为键。因为 React 会检查 key 以知道要删除哪个元素。例如，你的元素长度为 5，然后你删除元素索引2，所以现在元素长度为 4，但索引 2 仍然存在，所以 React 不知道你删除索引 2（因为键 2 仍然存在）所以它会移动 3到 2、4 到 3..检查这个以获得更好的解释和演示

你需要创建一个唯一的id，uuid作为选择

function add() {
    const list = [...element];
    const length = element.length;
    const uniqueId = uuid()
    list.push(
     {id: uniqueId
      comp: () => (<React.Fragment>
        <input key={uniqueId} />
        // index is length-1
        <button onClick={()=>{_delete(uniqueId)}}>delete</button>
      </React.Fragment>)
     }
    );
    setElement(list);
  }

function _delete(elementId) {
   // Because we set new state on current state
   // it's better to pass an function into setElement like this to prevent some problem with closure
   setElement(currently =>{
      return currently.filter(el => el.id !== elementId );
    });
}
return (
  <React.Fragment>
    <button onClick={add}>add Element</button>
    {element.map(el => el.comp())}
  </React.Fragment>
);

reactjs - 状态变量在功能组件中有错误的值

问题描述

解决方案

推荐阅读