Reactjs 如何将道具传递给子组件？

如何传递道具以反应子组件？ 我得到一个错误：

TypeError: Cannot read property 'user_id' of null

child
D:/T97/React-Test/test/src/child.js:6
  3 | const child = (props) => {
  4 |   const {user} = props;
  5 |   return (
> 6 |     <div className="child">
  7 |       {user.user_id}
  8 |     </div>
  9 |   );
View compiled

API:（”http://localhost:5000/user/1））

App.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Child from './child';
function App() {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios.get(
        'http://localhost:5000/user/1',
      );
      setUser(result.data);
    };
 
    fetchData();
  }, []);
  
  return (
    <div className="App">
      <Child user={user}/>
    </div>
  );
}
 
export default App;

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
从“./Child”导入子项；
函数App（）{
const[user，setUser]=useState（null）；
useffect（（）=>{
const fetchData=async（）=>{
const result=等待axios.get(
'http://localhost:5000/user/1',
);
setUser（结果数据）；
};
fetchData（）；
}, []);
返回(
);
}
导出默认应用程序；

child.js

import React from 'react';

const child = (props) => {
  const {user} = props;
  return (
    <div className="child">
      {user.user_id}
    </div>
  );
};

export default child;

从“React”导入React；
const child=（道具）=>{
const{user}=props；
返回(
{user.user_id}
);
};
导出默认子对象；

对于第一次渲染，用户尚不可用（最初为空），在完成axios请求/响应后，用户将可用，并且您可以在组件中使用，但当用户为空时，您必须添加条件渲染：

   <div className="child">
      {user && user.user_id}
    </div>

{user&&user.user\u id}

在您从API调用获得响应之前，子组件将完成它的第一次渲染。在这种情况下，您的子组件将接收空的“user”对象，因为它的初始状态是空的

const [user, setUser] = useState(null);

可以将初始集设置为空对象，如下所示

const [user, setUser] = useState({});

或者，您可以在子组件中再添加一个条件

<div className="child">
    {user && user.user_id}
</div>

{user&&user.user\u id}

一旦您从API获得响应，用户状态将被更新，您将获得所需的输出

---

下面是一个工作示例

我相信

const{user}=props编译得不好，用户实际上是空的。如果你能分享调试，那就太好了。尝试直接使用道具而不是用户。
const[user，setUser]=useState（null）--
用户
以null开头。这是导致错误的原因。稍后，它将成为一个具有您可以访问的属性的对象，但在axios请求完成并触发重新渲染之前，它不是一个对象。这是因为在第一次渲染时，
user
为null，因为
const[user，setUser]=useState（null）
，因此在子组件中，如果（user==null）返回null，则必须放入
。然后，它不会给你一个错误，当用户不再为null时，它会很好地呈现
const [user, setUser] = useState({});

<div className="child">
    {user && user.user_id}
</div>