React函数式组件状态未更新：Excel文件上传后UI表格不刷新问题

Got it, let's break down why your table isn't updating after uploading Excel files, and fix it step by step. The core problem here is how you're handling state updates in your function component—React relies on immutable state changes to trigger re-renders, and your current code is mutating the original state directly.

1. The Root Cause: State Mutation #

In your handleClick function, you're modifying the original state array instead of creating a new one:

let finalArray = items;
finalArray.push(...item);
setItems(finalArray)

When you assign finalArray = items, you're just creating a reference to the existing state array—not a copy. Pushing new items to this array mutates the original state directly. React can't detect this change because the array reference stays the same, so it skips re-rendering your Summary table component.

2. Bonus Issue: Useless (and Harmful) useEffect #

Your useEffect block is redundant and could cause unnecessary re-renders or even loops:

useEffect(() => {
  setItems(items);
  console.log('App.js use effect')
}, [items, files])

You're setting items to its own current value every time items or files changes. This does nothing useful and should be removed entirely.

3. Misconfigured files State #

You initialize files with useState(items), but this only sets the initial value once. After items updates, files won't sync automatically. If you don't actually need files as a separate state, you can remove it and just use items in the Upload component. If you do need it, you'll need to update it whenever items changes.

Step-by-Step Fixes #

Let's rewrite the problematic parts of your code:

Fix the handleClick Function (Immutable Update)

Instead of mutating the original array, create a new array using the spread operator:

const handleClick = (event, item) => {
  event.preventDefault();
  if (value === 'Add') {
    // Create a NEW array with existing items + new items
    const finalArray = [...items, ...item];
    console.log(finalArray, 'finalArray from app inside')
    setItems(finalArray);
    // Sync files state if you need it
    setFiles(finalArray);
  }
}

The spread operator ([...items, ...item]) creates a brand new array, giving React a new reference to detect—this will trigger a re-render of your Summary table.

Remove the Useless useEffect

Delete the entire useEffect block—it serves no purpose and can cause issues.

Clean Up the files State

If you don't use files outside of passing it to Upload, you can remove it entirely. If you need it, initialize it as an empty array and sync it with items in handleClick like we did above.

Corrected App.js Code #

Here's your full updated component:

import React, { useState } from "react";
import Summary from './summary';
import Upload from './component/upload/upload';
import './App.css';
import Main from './component/classComp/main';

const App =() => {
  const [items, setItems] = useState([]);
  const [value, setValue] = useState('');
  const [error, setError] = useState(false);
  const [helperText, setHelperText] = useState('Choose wisely')
  const [files, setFiles] = useState([]); // Initialize empty instead of items

  const handleClick = (event, item) => {
    event.preventDefault();
    if (value === 'Add') {
      const finalArray = [...items, ...item];
      console.log(finalArray, 'finalArray from app inside')
      setItems(finalArray);
      setFiles(finalArray); // Sync files with updated items
    }
  }

  console.log(items, 'items from app')

  return (
    <div className="map-container">
      <div className="left">
        <Main/>
      </div>
      <div className="left">
        <Upload 
          items={items} 
          setItems={setItems} 
          handleClick={handleClick} 
          files={files} 
          setFiles={setFiles} 
          value={value} 
          setValue={setValue} 
          helperText={helperText} 
          error={error} 
          setHelperText={setHelperText} 
          setError={setError} 
        />
        <Summary items={items} />
      </div>
    </div>
  );
}

export default App;

Key Takeaway #

React function components depend on immutable state changes to trigger re-renders. Never mutate state directly (like pushing to an array or modifying object properties). Always create a new copy of the state and update with that new reference.

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