Question

我可以在console.log(this.state.eventUser);渲染返回中调用数据，并在eventUser中显示所有数据。但是，当我尝试调用console.log(this.state.eventUser._id);时，它显示此Uncaught TypeError: Cannot read property '_id' of undefined的错误。我该如何解决这个问题？

    componentDidMount(){
        Tracker.autorun(() => {
            Meteor.subscribe('allUsers');
            const userId = this.props.location.state.event.userID;
            const eventUser = Meteor.users.findOne({_id: userId});
            this.setState({ eventUser });
        });
    }

    render(){
        return(
            <div>
                {console.log(this.state.eventUser._id)}
            </div>
        );
    }

Answer 1

如果不将{}括起来，则无法在JSX中使用console.log 尝试下面的代码

typeof(object).Assembly.Location

编辑：

您的代码正在异步执行数据库查询因此，您需要等待它完成。以下是async / await（JavaScript的ES7 +功能）的实现

尝试下面的代码

render(){
    return(
        <div>
            {put javascript here}
        </div>
    );
}

Answer 2

渲染中的某个位置this.state.eventUser可能未定义。

尝试一下

{this.state.eventUser && console.log(this.state.eventUser._id)

Answer 3

在您的render()函数运行时，似乎用户尚未保存到组件状态。

要解决此问题，请在您的组件中添加一个构造函数，在其中将eventUser定义为一个空对象。

class MyClass extends Component {

  constructor(props) {
    super(props);

    this.state {
      eventUser: {}
    };
  }

  componentDidMount() {
    Tracker.autorun(() => {
        Meteor.subscribe('allUsers');
        const userId = this.props.location.state.event.userID;
        const eventUser = Meteor.users.findOne({_id: userId});
        this.setState({ eventUser });
    });
  }

  render(){
    console.log(this.state.eventUser._id)
    return(
      <div>My Test Page</div>
    );
  }
}

希望有帮助！

Answer 4

componentDidMount将在组件已安装后触发（如名称所示）。在到达封闭语句时，状态尚未设置。

我不确定您为什么在渲染返回中使用console.log，但是如果您希望实际显示用户ID，则条件渲染是您的朋友：{this.state.eventUser && this.state.eventUser._id}

Answer 5

在第一次呈现组件时，如果您了解React生命周期挂钩，则在构造函数之后将触发render method，然后触发componentDidMount挂钩。因此对于第一个渲染eventUser是未定义的，然后在componentDidMount之后将满足状态。

解决方法是：

首先不要将console.log放在JSX中，最好将其放在return之前。
第二次检查对象是否已定义，然后返回数据

代码：

render(){
       const { eventUser } = this.state;

        // if eventUser is defined then log it
        {eventUser && console.log(eventUser._id)}

        // or you can add very simple load state
       if(!eventUser) return <h1>Loading....</h1>

    return(
        <div>
            {probably info about user }
        </div>
    );
}

如何在响应渲染返回中调用数据setState？

5 个答案: