React中useEffect与按钮onClick事件失效问题求助

问题1：useEffect初始化清空数据未生效 #

原因：你的useEffect未设置依赖数组，会在组件每次渲染时重复执行setPersonData([])，陷入渲染-更新的循环，导致初始化清空的效果被反复覆盖。

修复：给useEffect添加空依赖数组，让它仅在组件挂载时执行一次：

useEffect(() => {
  setPersonData([])
}, []) // 空依赖数组限定仅初始化执行

问题2："Clear All"和"Show Data"按钮点击无响应（UI无变化） #

原因：你给DatesCounts、DatesList传递的是原始的person静态数据，而非状态变量personData。即使按钮点击修改了personData状态，子组件仍使用原始数据，导致UI没有更新，看起来像是点击事件失效。

修复步骤：

1. 将子组件的数据源改为状态变量personData：

<DatesCounts person={personData} />
<DatesList person={personData} />

2. 为避免引用类型数据的更新问题，在onViewData中创建原始数组的副本：

const onViewData = () => {
  setPersonData([...person]) // 扩展运算符创建数组副本，确保状态更新触发渲染
}

修复后的完整App.js代码 #

import { Container, Row, Col } from "react-bootstrap";
import React, { useState, useEffect } from 'react';
import { person } from "./Data";
import DatesCounts from "./Components/DatesCounts";
import DatesList from "./Components/DatesList";
import DatesAction from "./Components/DatesAction";

function App() {
  const [personData, setPersonData] = useState(person);

  const onDelet = () => {
    setPersonData([]);
  };

  const onViewData = () => {
    setPersonData([...person]);
  };

  useEffect(() => {
    setPersonData([]);
  }, []);

  return (
    <div className="color-body font">
      <Container className="py-5">
        <DatesCounts person={personData} />
        <DatesList person={personData} />
        <DatesAction deletData={onDelet} viewData={onViewData} />
      </Container>
    </div>
  );
}

export default App;

修改后，初始化时useEffect会正常清空数据，点击按钮后状态更新会同步到子组件，UI也会随之变化。

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