Reactjs 仅当值不为null时才打印this.props

所以我有两个简单的React类

仪表板（父级）

---

是否可能需要为

用户

属性中的每个条目呈现一个

用户信息组件

如果

users

是您可能要执行的

user

对象的数组

{ users.map((user) => (<UserInfoComponent user={user} />) }

{users.map（（user）=>（）}

---

否则，要么为

用户提供一个空对象作为默认值（通过使用
defaultProps
），要么在
mapstatetrops
函数中检查
users
值的存在。
在你的缩减器中，只需将const
initialState={data:[]，user:null}
更改为
const initialState={data:[]，user:{}；
通过将user的初始状态设置为空对象，可以避免
this.props.user['property']
出现任何问题，从而导致无法读取未定义错误的属性

此外，如果最初的用户是一个空对象，那么您可能应该显示其他内容。如果您正在执行AJAX请求以获取用户信息，那么可以考虑执行加载组件。您只需要向reducer添加一个新状态，如下所示：

const initialState = { data: [], user: {}, loading: true };

然后，一旦您获得了用户信息，假设这是来自登录用户，您可以将reducer设置为
加载：false
，您还应该使用Object.assign或
…
操作符，以避免改变原始状态。请参阅。更新，使您的reducer看起来像这样

const UserReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_USER :
      return {
        ...state,
        data: [action.user, ...state.data],
      };
    case UPDATE_USER :
      return {
        ...state,
        user: action.user,
      };
    case LOGIN_USER: {
      const user = (action.response.statusCode === 200) ? action.response.user : null;

      console.log(user);

      return {
        ...state,
        user,
        loading: false
      };
    }
    default:
      return state;
  }
};

然后在UserDashboard组件中

class UserDashboardPage extends Component {
  render() {
    console.log("UserDashboardPage")
    console.log(this.props.users)

    const content = this.props.loading ? '....loading' : <UserInfoComponent user={this.props.users} />;
    return (
      <div>
        {content}
      </div>
    );
  }
}

class UserDashboardPage扩展组件{
render（）{
console.log（“UserDashboardPage”）
console.log（this.props.users）
const content=this.props.loading？“…loading”：；
返回(
{content}
);
}
}

这将确保它显示加载，然后一旦用户加载，它将显示用户信息。
您能显示您的减速器功能吗？大多数情况下，这是由于不变性造成的problem@Robsonsjre刚刚更新。这是您需要的吗？它会抛出任何控制台错误吗？因为您正在中的空对象上访问
firstName
e> UserInfoComponent

@AbhishekNair不，它只是不打印

名字

。控制台是我共享的链接。这会起作用，但我的问题是客户端和服务器还原程序不匹配。

const initialState = { data: [], user: {}, loading: true };

const UserReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_USER :
      return {
        ...state,
        data: [action.user, ...state.data],
      };
    case UPDATE_USER :
      return {
        ...state,
        user: action.user,
      };
    case LOGIN_USER: {
      const user = (action.response.statusCode === 200) ? action.response.user : null;

      console.log(user);

      return {
        ...state,
        user,
        loading: false
      };
    }
    default:
      return state;
  }
};

class UserDashboardPage extends Component {
  render() {
    console.log("UserDashboardPage")
    console.log(this.props.users)

    const content = this.props.loading ? '....loading' : <UserInfoComponent user={this.props.users} />;
    return (
      <div>
        {content}
      </div>
    );
  }
}