如何修复：违规：对象作为 React 子对象无效（已找到：带键的对象

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

那么如何让 'user' 在渲染中可用？

先谢谢你了，我得去睡觉了

Answer 1

欢迎使用 Whosebug 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 子对象无效（已找到：带键的对象

How to fix: Violation: Objects are not valid as a React child (found: object with keys

render

reactjs