如何在 useState 挂钩中将道具传递给初始 state？

Question

I am having an issue with initialising a useState hook with props that is passed to the current component from another.

the areas where I am having the issue is below (Keep in mind that I can access the prop if i just console.log it, so it not a matter of a failure of the prop passing data down)

const [ Uid, setUid ] = useState('');

It is important for me to pass the props like below as my data fetching on this component depends on Uid. So far I have tried

const [ Uid, setUid ] = useState(props.uid);

this did not work as it told me- first argument to be of type non-empty string, but it was: undefined

const [ Uid, setUid ] = useState(props);

        useEffect(() => {
            setUid(props.uid);
        }, []);

Can anyone see where i might be going wrong?

the full code is here- https://www.codepile.net/pile/m3zmwnK1

remember, the most important thing for me is to have the Uid contain the value from the props.uid as otherwise react gives me a "first argument to be of type non-empty string, but it was: undefined" issue

Answer 1

You are ignoring props.uid in subsequent effects. Try this

const Component({uid}){
 const [stateUid, setUid] = useState(uid);

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

}

Answer 2

You might want to add props to your useEffect dependency. If it changes too often, u might drop into infinite loop

useEffect(() => {
    setUid(props.uid);
}, [props.uid]);

In you App.js

function App() {
const [ user, setuser ] = useState(false);
const [ uid, setUid ] = useState(); //initial is empty

useEffect(() => {
    const unsubscribe = onAuthStateChange();
    return () => {
        unsubscribe();
    };
}, []); // it only run once so it might not set the state of uid

return <div className="App">{user ? <Home uid={uid} /> : <Form />}</div>; 
// uid passing to Home component might be empty