Material UI表格旧数据未清空：新数据追加问题求助

核心问题分析 #

你的代码里存在几个导致数据未被覆盖的问题：

• 存在一个无限循环且无意义的useEffect，它会在tableSearch变化时重复设置自身，干扰状态更新逻辑
• 冗余的双状态（searchQuery和tableSearch）增加了状态管理的混乱
• 不必要的forceUpdate调用可能打乱React的自动渲染机制

修复步骤及代码示例 #

1. 移除无效的useEffect
   这段代码完全没必要，还会导致状态异常：

   useEffect(() => {
       setTableSearch(tableSearch);
     }, [tableSearch]);
   

2. 合并冗余状态
   只保留一个状态用来存储表格数据，比如tableSearch，删掉searchQuery。

3. 移除所有forceUpdate调用
   React会在状态更新后自动重新渲染组件，不需要手动强制更新。

4. 简化搜索后的状态更新逻辑
   直接用新的搜索结果覆盖旧状态即可，无需先清空再赋值。

修改后的核心代码：

// 只保留一个状态存储表格数据
const [tableSearch, setTableSearch] = useState([]);

const handleSearch = (event) => {
    event.preventDefault();

    var config = {
      method: "POST",
      url: "http://localhost:3000/api/",
      headers: {
        "Content-Type": "application/json",
      },
      data: form,
    };

    axios(config)
      .then((res) => {
        console.log("Data:", res);
        if (res && res.status) {
          if (res.status === 201) {
            console.log("Data is: inside", form.keyword);

            const ItemSearched = res.data.success.filter((obj) => {
              return obj.location_Mnemonic_Code.includes(form.keyword);
            });

            console.log("ItemSearched:", ItemSearched, form.keyword);
            ItemSearched.sort((a, b) => parseFloat(b.weightage) - parseFloat(a.weightage));
            
            // 直接用新结果覆盖旧状态，自动清除旧数据
            setTableSearch(ItemSearched);

            if (ItemSearched.length === 0) {
              setToastMessage(`Sorry! Couldn't find data for ${form.keyword}`);
            } else {
              setToastMessage("");
            }
          } else {
            console.log("Data is:", res);
            setToastMessage(res.response?.message || "Request failed");
          }
        } else {
          setToastMessage(`Sorry! Couldn't find data for ${form.keyword}`);
        }
      })
      .catch((error) => {
        console.log(error);
        if (error && error.response) {
          if (error.response.status === 400) {
            setToastMessage(error.response.data.message[0]);
          }
        } else {
          setToastMessage("Network error occurred");
        }
      });
  };

额外检查 #

如果修改后问题依然存在，检查你的TableView子组件：

• 确认子组件是直接使用传入的dataSource进行渲染，而不是将其与内部状态做追加（比如用concat或者push操作）
• 子组件的dataSource属性要正确接收父组件传递的tableSearch

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