Как исправить: Нарушение: Объекты недопустимы как дочерний элемент React (найдено: объект с ключами - PullRequest
Новая
       12

Как исправить: Нарушение: Объекты недопустимы как дочерний элемент React (найдено: объект с ключами

0 голосов
/ 05 мая 2019

Я новичок в React, и у меня возникли некоторые проблемы.Я пытаюсь заставить React визуализировать одного пользователя, но я не знаю как.До сих пор каждая попытка была неудачной, и мне действительно нужна помощь.

Сообщение об ошибке и 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();
}
}

ИтакКак я могу сделать «пользователя» пригодным для рендеринга?

Заранее спасибо, теперь мне нужно немного поспать.

Ответы [ 2 ]

0 голосов
/ 05 мая 2019

Поскольку пользователь является объектом, вы не можете отобразить его как есть. Вместо этого нужно либо извлечь свойства, которые вы хотели бы отобразить, перед их рендерингом, либо ссылаться на них напрямую, например ::100100

Непосредственно: 

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;
}
0 голосов
/ 05 мая 2019

Добро пожаловать в 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
            });
        }
    )
};
...