Question

我是React的初学者，现在遇到了一些问题。我试图让React渲染一个用户，但是我不知道怎么做。到目前为止，每次尝试都失败了，我确实需要帮助。

Error message and console.log(this.state.user)

class SelfEdit extends React.Component {
    constructor(props){
        super(props);
        this.state = {
        isLoaded: false,
        user: null,
        loggedUser: props.loggedUser // Username of a logged account
    };

    this.getUser = this.getUser.bind(this);
}

render(){
    console.log(this.state.user);
    const div = (
        <div className="oneUser">
            <h2> {this.state.loggedUser} </h2> <br />
                 {this.state.user} //<-- Here I would like to get user's email or such
        </div>
    );
    return div;
}

getUser(){
    const url = 'http://localhost:3000/api/user/' + this.state.loggedUser;
    fetch(url)
    .then(res => res.json())
    .then(
        (result) => {
            this.setState({
                isLoaded : true,
                user: result
            });
        },
        (error) => {
            this.setState({
                isLoaded : true,
                error
            });
        }
    )
};

componentDidMount() {
  this.getUser();
}
}

那么如何使“用户”在渲染中可用？

先谢谢您，现在我要去睡觉了。

Answer 1

欢迎来到Stackoverflow Dr.Pippis。正如错误所暗示的那样，您不能仅仅将javascript对象呈现为React子对象。 this.state.user一样是原始对象。 React希望解释要显示的字符串或数字，因此您可以使用对象的属性（例如电子邮件）。

class SelfEdit extends React.Component {
    constructor(props){
        super(props);
        this.state = {
        isLoaded: false,
        user: null,
        loggedUser: props.loggedUser // Username of a logged account
    };

    this.getUser = this.getUser.bind(this);
}

render(){
    console.log(this.state.user);
    const div = (
        <div className="oneUser">
            <h2> {this.state.loggedUser} </h2> <br />
                 { this.state.user && (<div>{this.state.user.email}</div>) } 
        </div>
    );
    return div;
}

getUser(){
    const url = 'http://localhost:3000/api/user/' + this.state.loggedUser;
    fetch(url)
    .then(res => res.json())
    .then(
        (result) => {
            this.setState({
                isLoaded : true,
                user: result
            });
        },
        (error) => {
            this.setState({
                isLoaded : true,
                error
            });
        }
    )
};

Answer 2

由于用户是对象，因此无法按原样呈现它。相反，需要在呈现它们之前提取您想要显示的属性，或者直接引用它们，例如：

直接：

render(){
  console.log(this.state.user);
  const div = (
    <div className="oneUser">
      <h2> {this.state.loggedUser} </h2>
      <div>{this.state.user.email}</div>
      <div>{this.state.user.username}</div>
    </div>
  );
  return div;
}

或提取：

render(){
  console.log(this.state.user);
  // Destructure the properties you would like
  const {
    email,
    username,
  } = this.state.user;
  const div = (
    <div className="oneUser">
      <h2> {this.state.loggedUser} </h2>
      <div>{email}</div>
      <div>{username}</div>
    </div>
  );
  return div;
}

如何解决：违反：对象作为React子对象无效（找到：带有键的对象

2 个答案: