React datagrid组件初始加载null数据无法触发状态更新问题求解

你现在的核心问题有3个：

• 父组件调用子组件的写法错误，没有按React规范用JSX标签传递props，导致组件生命周期触发异常
• 子组件没有监听传入的statements props变化，初始挂载时statements为空，后续父组件拿到有效数据传入后，子组件无法感知，自然不会触发初始数据加载
• 状态更新时直接全量替换状态对象，会丢失原有状态里的其他属性

1. 先修改父组件代码 #

function CompanyDetails() {
    let { ticker } = useParams();
    let company = CompanyByTicker(ticker); 
    let statements = StatementsByKey(company.company_id); 

    // 加判断：拿到有效company和statements之后再渲染子组件，避免传空值
    return (
        <div className='pagebase'>
            {company?.name}
            {/* 改成JSX形式传props，不要直接调用组件函数 */}
            {statements?.one_id && <StatementComponent statements={statements} />}
        </div>
    );
}
export default CompanyDetails;

2. 再修改子组件代码 #

// 子组件接收props要解构，不要直接用statements参数
function StatementComponent({ statements }) {
    const StatementLoading = StatementLoadingComponent(Statement);
    const [appState, setAppState] = useState({
        id: 0,
        loading: false,
        statement: null,
    });

    function setId(stid){
        // 状态更新要合并旧状态，不要全量替换
        setAppState(prev => ({ ...prev, id: stid }))
    };

    // 新增useEffect：监听statements变化，有有效数据时自动设置第一个id触发初始加载
    useEffect(() => {
        if(statements?.one_id) {
            setId(statements.one_id)
        }
    }, [statements])

    useEffect(() => {
        // 只有id>0的时候才触发请求，避免无效空请求
        if (appState.id <= 0) return
        setAppState(prev => ({ ...prev, loading: true }));
        const apiUrl = domain + 'api/statements/single/' + appState.id + '/';
        fetch(apiUrl)
            .then((data) => data.json())
            .then((statement) => {
                setAppState(prev => ({ ...prev, loading: false, statement }));
            })
    }, [appState.id]);

    return (
        <Container sx={{ height: 500 }}>
            <h2>Financials</h2>
            <button onClick={() => setId(statements.one_id)}>{statements.one_type}</button>
            <button onClick={() => setId(statements.two_id)}>{statements.two_type}</button>
            <button onClick={() => setId(statements.three_id)}>{statements.three_type}</button>
            <StatementLoading isLoading={appState.loading} statement={appState.statement} />
        </Container>
    );
}
export default StatementComponent;

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