如何在 react render return 中调用数据 setState？

Question

我可以在 console.log(this.state.eventUser); render return 中调用数据并在 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 试试下面的代码

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

编辑：

您的代码正在对异步数据库执行查询所以你需要等待它完成。下面是 async/await 的实现（javascript 的 es7+ 特性）

试试下面的代码

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

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 将在组件已安装后触发（如名称所述）。在到达所附语句的位置，状态尚未设置。

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

Answer 5

当你的组件第一次渲染时，如果你了解 React 生命周期钩子，在构造函数之后将触发 render method 然后 componentDidMount 钩子。所以对于第一个渲染，eventUser 是未定义的，然后在 componentDidMount 之后状态将被满足。

所以解决方案是：

首先不要把console.log放在JSX里，最好放在return之前。
其次首先检查对象是否定义然后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>
    );
}

如何在 react render return 中调用数据 setState？

How to call data setState to in react render return?

javascript

reactjs

meteor

react-component