redux状态值返回未定义

Question

I declare state via redux connect

const mapStateToProps = state => ({
    singleBase: state.interaction.base
});

export default requiresLogin()(connect(mapStateToProps)(BasePage));

The state shows fine via console log console.log(this.props.singleBase);

id: "5b757e6743904228586a5a7f"
creatorId: "5b6e39ce08406602d0a9e125"
title: "tester"
currentUsers: 2
messages: 0

On the backend I have the following model:

const BaseSchema = mongoose.Schema({
  creatorId: { type: mongoose.Schema.Types.ObjectId, required: true },
  title: { type: String, required: true },
  currentUsers: { type: Number, default: 0 },
  messages: { type: Number, default: 0 }
});

But when I try to console log the value of currentUsers : console.log(this.props.singleBase.currentUsers); I get the following error: Cannot read property 'currentUsers' of undefined .

I tried both setting the Schema to a pure number, eg 5, as well as as a text "5". Neither one works. What detail am I missing to be able to get the value of currentUsers ?

EDIT & SOLUTION:

const users =
    this.props.singleBase && this.props.singleBase.currentUsers !== undefined
    ? this.props.singleBase.currentUsers
    : 0;
return (
    <div>
      <h2>{users}</h2>
    </div>
);

Here we ensure that this.props.singleBase exists and is true, while I make sure that this.props.singleBase.currentUsers has a value that is not undefined. If both evaluates true I display this.props.singleBase.currentUsers. The point of this is that until the asynchronous action has completed the singleBase will be empty. Once filled with data, I can display the currentUsers value.

Answer 1

You are most probably getting this data asynchronously, this is why you are getting this error. Before logging this.props.singleBase you should see an undefined in the console. This does not fire an error but if you try to get some property of an undefined object you hit this error. Trying to log undefined objects is ok, but trying to log a property where this object is undefined is not since at this time that object is undefined .

You can put a condition before your log:

this.props.singleBase && console.log(this.props.singleBase.currentUsers);

This is what will you do to render your items in the future instead of logging them. So, always remember, if you are doing an asynchronous job, there will be no data in the first render.

Answer 2

It might be happening because you're trying to console.log it before the current state is loaded. Try setting some flag like loading=true while you're getting your asynchronous data, and then change it to false after loading it.

Answer 3

const users =
    this.props.singleBase && this.props.singleBase.currentUsers !== undefined
    ? this.props.singleBase.currentUsers
    : 0;
return (
    <div>
      <h2>{users}</h2>
    </div>
);

Here we ensure that this.props.singleBase exists and is true , while I make sure that this.props.singleBase.currentUsers has a value that is not undefined. If both evaluates true I display this.props.singleBase.currentUsers . The point of this is that until the asynchronous action has completed the singleBase will be empty. Once filled with data, I can display the currentUsers value.