如何将数据传递给我的子组件？

Question

I try to pass data (like an object) from one component to another but I always get an empty object.

1. I call an async function to get data.
2. I use the setTeamAData / setTeamBData to populate the object
3. I pass to my child component TeamA / Team B as "data"
4. when I print props.data I always get {}

import React, { useEffect, useState } from 'react';
import Team from './Team';
import PlayerSelect from './PlayerSelect';
import axios from 'axios';
import moment from 'moment';

function Match(props) {
    const [id, setId] = props.match.params.id;
    const [teamAData, setTeamAData] = useState({});
    const [teamBData, setTeamBData] = useState({});
    const [location, setLocation] = useState(0);
    const [datetime, setDatetime] = useState(moment(Date.now()).format("YYYY-MM-DDTkk:mm"));
    const [locations, setLocations] = useState([]);
    const [teamA, setTeamA] = useState([0,0,0,0,0]);
    const [teamB, setTeamB] = useState([0,0,0,0,0]);
    const [teamAName, setTeamAName] = useState('');
    const [teamBName, setTeamBName] = useState('');
    const [teamAScore, setTeamAScore] = useState(0);
    const [teamBScore, setTeamBScore] = useState(0);
    const [pichichi, setPichichi] = useState(['']);
    const [mvp, setMVP] = useState([]);

    useEffect(() => {
        console.log('USE EFFECT!')
        async function fetchLocations() {
            const response = await axios.get('locations');
            setLocations(response.data);
        }
        fetchLocations();

        async function fetchMatch(id) {
            const response = await axios.get(`matches/${id}`);
            const match = response.data;
            setLocation(match.location);
            setTeamAData({name: response.data.teamAName});
            setTeamBData({name: response.data.teamBName});
            setTeamAScore(match.teamAScore);
            setTeamBScore(match.teamBScore);
            setPichichi(match.pichichi);
        }
        if (props.match.params.id)
            fetchMatch(props.match.params.id);
    }, []);

    async function handleSubmit(event) {
        event.preventDefault();
        const response = await axios.post('matches', {
            location: location,
            datetime: datetime,
            teamAName: teamAName,
            teamA: teamA,
            teamAScore: teamAScore,
            teamB: teamB,
            teamBName: teamBName,
            teamBScore: teamBScore,
            pichichi: pichichi,
            mvp: mvp
        });
    }

    function handlePlayerChange(teamId, ddId, value) {
        let team = teamA; 
        if (teamId == 'B')
            team = teamB;
        team[ddId[1]] = value;
        if (teamId == 'A')
            setTeamA(team);
        else
            setTeamB(team);
    }

    function handleNameChange(teamId, name) {
        if (teamId == 'A')
            setTeamAName(name);
        else
            setTeamBName(name);
    }
    return (
        <div>
        <form onSubmit={handleSubmit}>
            <div className="field">
                <div className="label">Location:</div>
                <div className="control">
                <div className="select">
                    <select onChange={e=> setLocation(e.target.value)} value={location}>
                    <option value="0">---</option>
                    {
                        locations.map(location => 
                            <option value={location._id} key={location._id}>{location.name}</option>
                        )
                    }
                    </select>
                </div>
                </div>
            </div>
            <div className="field">
                <div className="label">Date / time :</div>
                <div className="control">
                    <input type="datetime-local" className="input" value={datetime} onChange={(e) => setDatetime(e.target.value)}/> 
                </div>
            </div>
            <div className="columns">
                <div className="column">
                    <Team id="A" 
                        data={teamAData}
                        onNameChange={handleNameChange}
                        onPlayerChange={handlePlayerChange}/>
                </div>
                <div className="column">
                    <Team id="B" 
                        data={teamBData}
                        onNameChange={handleNameChange}
                        onPlayerChange={handlePlayerChange}/>
                </div>
            </div>
            <div className="field">
                <div className="label">Score A</div>
                <div className="control">
                    <input type="text" value={teamAScore} onChange={e=> setTeamAScore(e.target.value)}/>    
                </div>
            </div>
            <div className="field">
                <div className="label">Score B</div>
                <div className="control">
                    <input type="text" value={teamBScore} onChange={e=> setTeamBScore(e.target.value)}/>    
                </div>
            </div>
            <div className="field">
                <div className="label">Pichichi</div>
                <div className="control">
                    <PlayerSelect multiple value={pichichi}/>   
                </div>
            </div>
            <div className="field">
                <div className="label">MVP</div>
                <div className="control">
                    <PlayerSelect value={mvp}/> 
                </div>
            </div>
            
            <button className="button is-primary" type="submit">Create</button>
        </form>

        
        </div>
    )
}

export default Match;

This is the child component:

import React, { Fragment, useEffect, useState } from 'react';
import PlayerSelect from './PlayerSelect';

function Team(props) {
    console.log(props)
    const [numberOfPlayers, setNumberOfPlayers] = useState(6);
    const [players, setPlayers] = useState([]);
    const [name, setName] = useState(props.data.name);

    useEffect(() => {
    }, []);

    function handlePlayerChange(id, value) {
        let p = players;
        p.push(value)
        setPlayers(p);
        props.onPlayerChange(props.id, id, value);
    }

    function addPlayer(event) {
        setNumberOfPlayers(numberOfPlayers+1);
    }

    function removePlayer(event) {
        setNumberOfPlayers(numberOfPlayers-1);
    }

    function handleNameChange(event) {
        event.preventDefault();
        setName(event.target.value);
        props.onNameChange(props.id, event.target.value);
    }

    let dds = []
    for (let i = 0; i < numberOfPlayers; ++i) {
        const id = `${props.id}${i}`;
        dds.push(
            <PlayerSelect key={id} id={id} onChange={handlePlayerChange}/>
        )
    }
    const placeholderName = `Team ${props.id}`;
    return (
        <>
            <div className="control">
                <input type="text" value={name} onChange={handleNameChange} className="input" placeholder={placeholderName}/>
            </div>
            {/*<button className="button" onClick={addPlayer}>+</button><br/>*/}
            {dds}
        </>
    )
}

export default Team;

Answer 1

data is only ever {} when the children components mount and name state is initialized.

const [name, setName] = useState(props.data.name);

If the data prop is asynchronously updated then the children components need to also handle the data prop updating later. Use an useEffect hook with a dependency on the data prop` to update the local state when it updates from the parent component.

useEffect(() => {
  setName(props.data.name);
}, [props.data.name]);