React中useEffect取数后，筛选选项渲染异常的问题排查

错误原因分析 #

• 状态异步更新导致旧值误用：setStatus是异步操作，在getStatus里调用setStatus后立即用status筛选数据，此时status还未更新为新选中的值，筛选逻辑用的是上一次的状态，导致表格数据不更新。
• 受控组件属性错误：select的value写成了status.value，但status是字符串类型（初始值为"Pending"），不存在value属性，这会导致select的受控状态异常，选中状态和实际值不匹配。
• 初始数据未筛选：首次获取到queryData后，没有根据默认的status筛选出初始的data，表格初始可能无数据。

修复后的代码 #

import { useEffect, useState } from 'react';

const QueriesView = () => {
    const [queryData, setqueryData] = useState([])
    const [status, setStatus] = useState("Pending")
    const [data, setdata] = useState([])

    const getStatus = (e) => {
        setStatus(e.target.value)
    }

    useEffect(() => {
        const fetchData = async () => {
            try {
                const url = "https://script.google.com/macros/s/AKfycbykZx2qtz39U5j8TwDRVuziKfoLzF6YkYvDL6Ejoj822Vg9MPe1pDS9PX86IeP1Kzw82Q/exec?request=getQueriesData";
                const response = await fetch(url);
                const json = await response.json();
                setqueryData(json)
            } catch (err) {
                console.error("获取数据失败:", err)
            }
        }
        fetchData();
    }, [])

    // 监听status和queryData变化，自动更新筛选后的数据
    useEffect(() => {
        if (queryData.length > 0) {
            setdata(queryData.filter(ele => ele.querystatus === status))
        }
    }, [status, queryData])

    return (
        <>
            <div className='container mt-2'>
                <div className='row'>
                    <select 
                        className="form-select form-select-sm" 
                        aria-label=".form-select-sm example"
                        name='status'
                        onChange={getStatus}
                        value={status}
                    >
                        <option value="Pending">Pending</option>
                        <option value="Resolved">Resolved</option>
                        <option value="Rejected">Rejected</option>
                    </select>
                </div>
                <table className="table table-hover table-sm">
                    <thead className="thead-dark">
                        <tr>
                            <th scope="col">Date</th>
                            <th scope="col">Query Number</th>
                            <th scope="col">Email</th>
                            <th scope="col">Full Name</th>
                            <th scope="col">Phone No.</th>
                            <th scope="col">Status</th>
                            <th scope="col">Details</th>
                        </tr>
                    </thead>
                    <tbody>
                        {data.map(ele => (
                            <tr key={ele.querynumber}>
                                <th scope="row">{ele.querydate}</th>
                                <td>{ele.querynumber}</td>
                                <td>{ele.email}</td>
                                <td>{ele.firstname} {ele.lastname}</td>
                                <td>{ele.contact}</td>
                                <td>{ele.querystatus}</td>
                                <td><button type='button'>Details</button></td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </>
    )
}

export default QueriesView;

关键修改说明 #

1. 重构筛选逻辑：移除getStatus里的setdata，新增useEffect监听status和queryData的变化，自动触发筛选，彻底避免异步状态更新导致的旧值问题。
2. 修正select受控属性：将value={status.value}改为value={status}，确保select的选中状态和status变量同步。
3. 初始化数据筛选：新的useEffect会在数据加载完成后，自动根据默认status筛选初始数据，表格首次渲染就能显示对应内容。
4. React规范修正：把原生class属性改为React要求的className，给表格行添加唯一key（用querynumber作为标识），消除React控制台警告。
5. 错误日志优化：将console.log改为console.error，更直观地展示数据获取失败的错误信息。

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