React子组件调用handleDelete后elements数组打印异常问题求助

我开发了一个React应用，流程是从API获取数据存入data数组，再将其转换为子组件组成的elements数组。点击Add按钮会向data添加空数据，通过useEffect触发updateElements更新elements。点击Save按钮的testfunc能正常打印elements，但点击子组件的Delete按钮调用handleDelete时，打印的elements数组少了一个元素。

子组件代码 #

const CategoryField = (props) => {
  const [label, setLabel] = useState(props.data.label);
  const [categoryId, setCategoryId] = useState(props.data.categoryId);
  const [description, setDescription] = useState(props.data.description);
  const [uniqueName, setUniqueName] = useState(props.data.uniqueName);

  return (
    <Row className="categoryBox">
      <Col xs={12}>
        <Row>
          <Col xs={12} className="categoryLabel">
            {label}
          </Col>
        </Row>
        <Row>
          <Col xs={4} className="categoryFieldTitle">
            categoryId:
            <input
              id="categoryId"
              onChange={(e) =>
                props.handleChange(e.target.value, props.id, e.target.id)
              }
              defaultValue={categoryId}
              className="categoryInput"
            />
          </Col>
          <Col xs={8} className="categoryFieldTitle">
            description:
            <input
              id="description"
              onChange={(e) =>
                props.handleChange(e.target.value, props.id, e.target.id)
              }
              defaultValue={description}
              className="categoryInput"
            />
          </Col>
        </Row>
        <Row>
          <Col xs={4} className="categoryFieldTitle">
            uniqueName:
            <input
              id="uniqueName"
              onChange={(e) =>
                props.handleChange(e.target.value, props.id, e.target.id)
              }
              defaultValue={uniqueName}
              className="categoryInput"
            />
          </Col>
          <Col xs={8} className="categoryFieldTitle">
            label:
            <input
              id="label"
              onChange={(e) => {
                setLabel(e.target.value);
                props.handleChange(e.target.value, props.id, e.target.id);
              }}
              defaultValue={label}
              className="categoryInput"
            />
          </Col>
        </Row>
        <Row>
          <Col xs={12}>
            <button
              className="categoryDeleteButton"
              onClick={(e) => props.handleDelete(props.id)}
            >
              Delete
            </button>
          </Col>
        </Row>
      </Col>
    </Row>
  );
};

父组件代码 #

export default function App() {
  const [data, setData] = useState([]);
  const [elements, setElements] = useState();

  const addBlank = () => {
    let tmp = [...data];
    tmp.push({
      uniqueName: 'unique_name',
      categoryId: 'category_id',
      description: 'some description',
      label: 'Nazwa',
    });
    setData(tmp);
  };
  const handleChange = (change, id, type) => {
    let tmp = [...data];
    switch (type) {
      case 'categoryId':
        tmp[parseInt(id)].categoryId = change;
        break;
      case 'description':
        tmp[parseInt(id)].description = change;
        break;
      case 'uniqueName':
        tmp[parseInt(id)].uniqueName = change;
        break;
      case 'label':
        tmp[parseInt(id)].label = change;
        break;
    }
    setData(tmp);
  };
  const handleDelete = (id) => {
    console.log(elements);
  };

  const updateElements = () => {
    let tab = [];
    for (let i = 0; i < data.length; i++) {
      tab.push(
        <CategoryField
          key={data[i].uniqueName.toString() + '' + i}
          data={data[i]}
          id={i}
          handleChange={handleChange}
          handleDelete={handleDelete}
        />
      );
    }
    setElements(tab);
  };
  useEffect(() => {
    console.log('changed elements');
    console.log(elements);
  }, [elements]);

  useEffect(() => {
    setData([
      {
        uniqueName: 'test_name',
        categoryId: '434324324',
        description: 'Some desc',
        label: 'Test Name',
      },
    ]);
  }, []);
  useEffect(() => {
    updateElements();
  }, [data]);

  const testfunc = () => {
    console.log(elements);
  };

  return (
    <div className="main">
      <Container>
        <Row className="sectionTitleBox">
          <Col xs={12} className="sectionTitle">
            Categories
          </Col>
        </Row>
        {elements}
        <Row>
          <Col xs={12}>
            <button onClick={testfunc}>Save</button>
            <button onClick={addBlank}>Add</button>
          </Col>
        </Row>
      </Container>
    </div>
  );
}

问题原因与解决办法 #

核心问题 #

这是闭包捕获过期状态导致的：

• 子组件的handleDelete是初始化时生成的闭包，它引用的是当时的elements值，而非最新状态。
• 添加新元素后elements更新，但旧子组件里的handleDelete依然持有旧的elements引用，所以点击Delete时打印的是旧数组。
• 手动维护elements状态的方式不符合React最佳实践，React推荐渲染时动态生成子组件，而非提前存储JSX到状态。

修复步骤 #

1. 移除elements状态，渲染时动态生成子组件
   不需要单独维护elements，在return里直接遍历data生成CategoryField，确保每次渲染都用最新的data和回调。

2. 修复闭包问题
   直接在handleDelete中使用最新的data，或者通过data推导当前组件结构，避免依赖过期的elements引用。

3. 优化子组件状态管理
   子组件无需自己维护状态，直接使用props.data的值，避免父子状态不一致。

修复后的父组件示例 #

export default function App() {
  const [data, setData] = useState([]);

  const addBlank = () => {
    setData([...data, {
      uniqueName: 'unique_name',
      categoryId: 'category_id',
      description: 'some description',
      label: 'Nazwa',
    }]);
  };

  const handleChange = (change, id, type) => {
    setData(prevData => {
      const newData = [...prevData];
      newData[parseInt(id)][type] = change;
      return newData;
    });
  };

  const handleDelete = (id) => {
    // 直接使用最新的data推导当前组件结构
    const currentElements = data.map((item, idx) => (
      <CategoryField 
        key={item.uniqueName + idx} 
        data={item} 
        id={idx} 
        handleChange={handleChange} 
        handleDelete={handleDelete} 
      />
    ));
    console.log(currentElements);
  };

  useEffect(() => {
    setData([
      {
        uniqueName: 'test_name',
        categoryId: '434324324',
        description: 'Some desc',
        label: 'Test Name',
      },
    ]);
  }, []);

  const testfunc = () => {
    const currentElements = data.map((item, idx) => (
      <CategoryField 
        key={item.uniqueName + idx} 
        data={item} 
        id={idx} 
        handleChange={handleChange} 
        handleDelete={handleDelete} 
      />
    ));
    console.log(currentElements);
  };

  return (
    <div className="main">
      <Container>
        <Row className="sectionTitleBox">
          <Col xs={12} className="sectionTitle">
            Categories
          </Col>
        </Row>
        {/* 渲染时动态生成子组件 */}
        {data.map((item, idx) => (
          <CategoryField
            key={item.uniqueName + idx}
            data={item}
            id={idx}
            handleChange={handleChange}
            handleDelete={handleDelete}
          />
        ))}
        <Row>
          <Col xs={12}>
            <button onClick={testfunc}>Save</button>
            <button onClick={addBlank}>Add</button>
          </Col>
        </Row>
      </Container>
    </div>
  );
}

修复后的子组件示例 #

const CategoryField = (props) => {
  // 直接使用props.data的值，无需维护本地状态
  const { label, categoryId, description, uniqueName } = props.data;

  return (
    <Row className="categoryBox">
      <Col xs={12}>
        <Row>
          <Col xs={12} className="categoryLabel">
            {label}
          </Col>
        </Row>
        <Row>
          <Col xs={4} className="categoryFieldTitle">
            categoryId:
            <input
              id="categoryId"
              onChange={(e) =>
                props.handleChange(e.target.value, props.id, e.target.id)
              }
              value={categoryId}
              className="categoryInput"
            />
          </Col>
          <Col xs={8} className="categoryFieldTitle">
            description:
            <input
              id="description"
              onChange={(e) =>
                props.handleChange(e.target.value, props.id, e.target.id)
              }
              value={description}
              className="categoryInput"
            />
          </Col>
        </Row>
        <Row>
          <Col xs={4} className="categoryFieldTitle">
            uniqueName:
            <input
              id="uniqueName"
              onChange={(e) =>
                props.handleChange(e.target.value, props.id, e.target.id)
              }
              value={uniqueName}
              className="categoryInput"
            />
          </Col>
          <Col xs={8} className="categoryFieldTitle">
            label:
            <input
              id="label"
              onChange={(e) =>
                props.handleChange(e.target.value, props.id, e.target.id)
              }
              value={label}
              className="categoryInput"
            />
          </Col>
        </Row>
        <Row>
          <Col xs={12}>
            <button
              className="categoryDeleteButton"
              onClick={() => props.handleDelete(props.id)}
            >
              Delete
            </button>
          </Col>
        </Row>
      </Col>
    </Row>
  );
};

内容的提问来源于stack exchange，提问作者AmaZiN