React : useState send empty value the first time but not the second time to my child component...?-CodePudding

I want to pass props to my child component PaperGovernment . my props contains an Object. My problem is when I try to console.log() the props that I will send to my child component, I see two array. The first is empty and the second is filled of my data as you can see below :

Could you help my to solve this problem please ?

const GovernmentId = (props) => {
    let { id } = useParams();

    const { arrayMinistriesInfo } = props;

    const [governmentList, setGovernmentList] = useState([]);

    useEffect(() => {
        axios.get(`http://localhost:3001/GovernmentCreate/byId/${id}`)
            .then((res) => {

                const resData = res.data;

                arrayMinistriesInfo.map((valueMinitries) => {
           
                        Object.keys(resData).map((i) => {
                        
                            if (i === valueMinitries.dataBase) {
                                resData[i][0].icon = valueMinitries.icon
                                resData[i][0].nameMinistry = valueMinitries.nameMinistry

                            }
                        });
                    
                });

                setGovernmentList(resData);
       

            }).catch((err) => {
                console.log(err);
            });
    }, []);
    return (
        <Box>
            Bonjour
            {console.log(governmentList)}
        </Box>
            //<PaperGovernment governmentList={governmentList}/>        
    );
};

CodePudding user response：

Try it

 <Box>
            Bonjour
           {governmentList?.length > 0 && console.log(governmentList)}
        </Box>

CodePudding user response：

It is the expected behavior.

const [governmentList, setGovernmentList] = useState([]);

Here you set governmentList as an empty Array, so the initial value is an empty array.

If you want to give the array to the children component once you have fetched your data, you can do it like this:

{governmentList.length && <PaperGovernment governmentList={governmentList}/>}

This way, you only give the array to the child component if it is not empty. If you want, you can also have a more complex logic, for instance by storing in a local state a boolean that tells when you fetched the array (in the useEffect, at the end, it would look like this:

setGovernmentList(resData);
setFetchIsDone(true);

And then with the same logic, you can give the fetched array to the child component:

{fetchIsDone && <PaperGovernment governmentList={governmentList}/>}

Note that with my first way to proceed, you don't give the array to the child component if it is an emty array, so if you want to be able to still give it to the children, even if it is an empty array, you should rather consider the 2 way to proceed