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

【问题标题】：How to pass props to child React component?如何将道具传递给子 React 组件？
【发布时间】：2020-12-19 22:47:47
【问题描述】：

如何将 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

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

{"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;

【问题讨论】：

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

标签： reactjs react-props use-effect use-state react-functional-component

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

子组件将在您从 API 调用获得响应之前完成它的第一次渲染。在这种情况下，您的子组件将接收到 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

【讨论】：