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

Question

如何将 props 传递给 React 子组件？我收到错误：

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

当我用 JSON.stringify(user) 替换 child.js 中的 user.user_id 时，我得到：

{"user_id":1,"password":"null","user_name":"User1","email":"user@gmail.com","avatar_url":"https://picsum.photos/300/300"}

API: ("http://localhost:5000/user/1")

{"user_id":1,"password":"null","user_name":"User1","email":"user@gmail.com","avatar_url":"https://picsum.photos/300/300"}

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;

child.js

import React from 'react';

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

export default child;

Answer 1

对于第一次渲染，用户还不可用（最初为空），在 axios request/response 完成后，用户将可用，您可以在您的组件中使用，但您必须添加一个用户为空时的条件渲染：

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

Answer 2

子组件将在您收到 API 调用的响应之前完成它的第一次渲染。在这种情况下，您的子组件将接收 'user' 对象作为 null 因为它的初始状态是 null 因为这个

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

您可以像这样将初始集合设置为空对象

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

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

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

收到 API 的响应后，用户状态将更新，您将获得所需的输出。

这是工作示例https://stackblitz.com/edit/react-eutbvw?file=src%2FApp.js

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

How to pass props to child React component?

reactjs

react-props

use-effect

react-functional-component

use-state