Question

我在初始化带有道具的useState钩子时遇到问题，该钩子从另一个传递到当前组件。

下面是我遇到问题的区域（请记住，如果我只用console.log即可访问prop，所以这与prop向下传递数据的失败无关）

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

对于我来说，传递如下所示的道具很重要，因为我在此组件上获取的数据取决于Uid。到目前为止，我已经尝试过

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

这不起作用，因为它告诉我-第一个参数的类型为非空字符串，但它是：undefined

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

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

谁能看到我可能在哪里出问题了？

完整代码在这里-https://www.codepile.net/pile/m3zmwnK1

请记住，对我来说最重要的是让Uid包含props.uid中的值，否则反应给我一个“第一个参数类型为非空字符串，但这是：未定义”问题< / p>

Answer 1

在后续效果中，您将忽略props.uid。试试这个

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

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

}

Answer 2

您可能希望将道具添加到您的useEffect依赖项中。如果它更改得太频繁，则您可能会陷入无限循环

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

在您的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

如何在useState挂钩中将道具传递到初始状态？

2 个答案: