为什么React已经传递了属性仍会报TypeError: undefined has no properties错误

错误原因 #

你的Users组件是函数式组件，React的函数式组件不存在this实例上下文，你使用this.props访问属性时，this的值为undefined，因此触发了undefined不存在对应属性的类型错误。

解决方法 #

直接使用函数组件入参中定义的props对象访问传入的属性，将Users组件中所有this.props替换为props即可，修改后的组件代码如下：

import UserItem from './UserItem';
import React from 'react';

const Users = (props) => {
    const userStyle = {
        display: 'grid',
        gridTemplateColumns: 'repeat(3,1fr)',
        gridGap: '1rem',
    };

    if (props.loading) {
        return <h1>Loading...</h1>;
    } else {
        return (
            <div style={userStyle}>
                {props.users.map((user) => (
                    <UserItem key={user.id} user={user} />
                ))}
            </div>
        );
    }
};
export default Users;

额外优化建议 #

• 你也可以在函数入参位置直接解构props，代码会更简洁：const Users = ({loading, users}) => {，后续直接使用loading和users变量即可，不需要再写props.前缀。
• 你请求的Github API地址建议使用https协议，避免http请求被浏览器的混合内容策略拦截。

内容的提问来源于stack exchange，提问作者wick3d