React 属性值在子组件的函数内不可用

Question

为什么在子组件函数中将 props.data 设置为空。

下面给出示例代码来解释我的问题。

const Parent = () => {
  const [state, usestate] = usestate();
  useEffect(() => {
    // async api call
    // After successfull response
    usestate(apiData);
  }, []);
  const handleClick = () => {
    //sample
  };
  return <ChildComponent handleClick={handleClick} data={state} />;
};

//ChildComponent

const ChildComponent = (props) => {
  const handleClick1 = (e) => {
    // Here am getting empty value when I try props.data (this happening only for the first time)
    console.log(props.data); // empty
  };
  return <subChild handleClick={handleClick1} />;
};

注意：我正在从 api 获取 json 响应并且数据在孩子内部可用，但是当我触发 handleClick 时第一次值是空的（发生在这个特定实例）

父组件也没有重新渲染 - 已验证

Answer 1

第一次得到undefined很正常

当你做

const[state,usestate]= useState()

您的变量 state 具有未定义的值

useEffect 钩子在你的父组件第一次渲染后被调用，所以当你的父组件第一次被渲染时，你的 state 还没有值，这个空值被传递给孩子。