Question

所以我有两个简单的React类

仪表板（父级）

class UserDashboardPage extends Component {
  render() {
    console.log("UserDashboardPage")
    console.log(this.props.users)
    return (
      <div>
        <UserInfoComponent user={this.props.users} />
      </div>
    );
  }
}

// map Users from store to Props
function mapStateToProps({ users }) {
  return { users };
}

UserInfoComponent（child）

export class UserInfoComponent extends Component {
  render() {
    console.log("UserInfoComponent")
    console.log(this.props.user)
    return (
      <h2>{this.props.user.firstName}</h2>
    );
  }
}

我遇到的问题是我想在UserInfoComponent中打印this.props.user.firstName，但该值最初为null，然后当值获取数据时，组件不会重新呈现。

userReducers

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

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

      console.log(user);

      return {
        user,
      };
    }
    default:
      return state;
  }
};

Example of how the data changes

Answer 1

在reducer中只需将const initialState = { data: [], user: null }更改为const initialState = { data: [], user: {} };通过使用户的初始状态为空对象，可以避免this.props.user['property']导致无法读取未定义错误属性的任何问题。

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

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

然后一旦你收到用户信息，假设来自登录用户，你可以将reducer设置为loading: false，你应该使用Object.assign或...运算符来避免变异原始状态。见http://redux.js.org/docs/recipes/UsingObjectSpreadOperator.html。更新，以便您的减速器看起来像这样

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>
    );
  }
}

这将确保它显示加载，然后一旦用户加载它将显示用户信息。

Answer 2

是否有可能为UserInfoComponent属性中的每个条目呈现一个users。

如果users是您可能想要做的user个对象数组

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

否则，要么提供一个空对象作为users的默认值（使用defaultProps），要么检查users函数中是否存在mapStateToProps值。< / p>

只有当value不为null时才重新打印this.props

2 个答案: