React useState数组状态更新后表格不重新渲染问题求助

问题根因 #

你当前的问题核心是不符合React状态更新的规范，具体错误点如下：

1. 数组状态未声明更新方法：声明arr状态时只解构了状态值，没有获取对应的setArr更新函数，React无法感知你要更新这个状态。
2. 数组更新方式错误：你直接修改普通变量initialArray的值，没有通过状态setter函数更新，且push属于引用类型原地修改，React无法检测到状态变更，自然不会触发重渲染。
3. 无效测试逻辑冗余：count状态、依赖testBen的useEffect和你的核心需求完全无关，反而会带来不必要的性能损耗。

修复后完整代码 #

import React, { useState } from 'react';
import item from '../item.json';
import Container from 'react-bootstrap/Container';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown';
import InputGroup from 'react-bootstrap/InputGroup';
import Table from 'react-bootstrap/Table';

const Main = () => {
    // 声明数组状态及对应的更新方法
    const [arr, setArr] = useState([]);
    
    const testBen = (a) => {
        // 函数式更新生成新数组，避免原地修改原状态
        setArr(prev => [...prev, a]);
    }

    return (
        <Container>
            <div className="space" />
            <InputGroup>
                <DropdownButton
                    variant="outline-secondary"
                    title="Data"
                    id="dropdown"
                >
                    {
                        item.list.map((obj, i) => {
                            return (
                                <Dropdown.Item
                                    key={i}
                                    onClick={() => testBen(obj)}>{obj.un_number}</Dropdown.Item>
                            )
                        })
                    }
                </DropdownButton>
            </InputGroup>
            <Table bordered className="text-center">
                <thead>
                    <tr>
                        <th>UN Number</th>
                        <th>Description</th>
                        <th>Total Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        arr.map((obj, i) => {
                            return (
                                <tr key={i}>
                                    <td>{obj.un_number}</td>
                                    <td>{obj.description}</td>
                                    <td></td>
                                </tr>
                            )
                        })
                    }
                </tbody>
            </Table>
        </Container>
    )
}

export default Main;

修复说明 #

• 给arr状态补充了setArr更新方法，React所有状态变更必须通过对应setter方法触发
• 移除了无用的initialArray变量、count状态和多余的useEffect逻辑
• 更新数组时使用函数式更新，解构原有数组生成新数组传入setArr，React检测到状态引用变化就会触发组件重渲染，表格会同步展示最新选中项。

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