如何为 child 组件生成数据？

Question

这里是 parent 代码：

import {Col,Container,Row} from 'react-bootstrap';
import {useEffect,useState} from "react";
import AppConfig from '../../utils/AppConfig';
import BB from './BB';
import React from "react";
import Roster from '../../utils/Roster';
import MonthPicker from '../monthPicker/MonthPicker';
export default function AA(){
    const[rosterMonth,setRosterMonth]=useState(new Date());
    const[rosterTableData,setRosterTableData]=useState({});
    let monthPickerMinDate=JSON.parse(AppConfig.MIN_DATE);
    monthPickerMinDate=new Date(monthPickerMinDate.year,monthPickerMinDate.month-1,monthPickerMinDate.date);
    useEffect(()=>{
        const getData = async () => {
            let roster = new Roster();
            let rosterData = await roster.get(rosterMonth.getFullYear(),rosterMonth.getMonth()+1);
            let rosterParam = await roster.getRosterParam();
            setRosterTableData(
               {
                "rosterData":rosterData,
                "rosterParam":rosterParam
               }
            )
        }
        getData();    
    },[rosterMonth]);
    let updateMonth=(year,month)=>{
        //console.log("updateMonth="+year+","+month);
        let newDate=new Date();
        newDate.setFullYear(year);
        newDate.setMonth(month);
        setRosterMonth(newDate);
    }
    return(
        <div className="App p-1">
            <Container fluid={true} className="tableContainer">
                <Row>
                    <Col className="font-weight-bold text-center tableCaption" md={12} lg={12} sm={12} xl={12} xs={12}>
                        <u>Roster</u>
                    </Col>
                </Row>
                <Row>
                    <Col md={12} lg={12} sm={12} xl={12} xs={12}>
                        <MonthPicker 
                            minDate={monthPickerMinDate}
                            onSelect={updateMonth} />                        
                    </Col>
                </Row>
                <Row>
                    <Col className="d-flex justify-content-center p-0" md={12} lg={12} sm={12} xl={12} xs={12}>
                        <BB rosterTableData={rosterTableData}/>
                    </Col>
                </Row>                  
            </Container>        
        </div>
    )
}

这里是 child 代码：

export default function BB(props){
    console.log(props);
    return(<div></div>);
}

预期结果是：

当用户从 MonthPicker 选择月份时，parent 组件将 select 月份和年份提交给服务器。
从服务器获取结果，然后将结果发送给child组件。

实际结果是child组件显示props两次（parent初始挂载和更新挂载），可能是存在2个状态变量造成的。

但是，我不知道如何在不使用2个状态变量的情况下实现该功能。

有没有更简单的解决办法？

Answer 1

如果这真的是个问题，我会使用条件渲染 - 让 rosterTableData 最初为空，并在渲染 BB:

之前检查它是否为空

const[rosterTableData,setRosterTableData]=useState();

<Col className="d-flex justify-content-center p-0" md={12} lg={12} sm={12} xl={12} xs={12}>
    {rosterTableData && <BB rosterTableData={rosterTableData}/>}
</Col>

如何为 child 组件生成数据？

How to generate data for the child component?

javascript

reactjs

use-effect

use-state