ReactJs результат setState не отображается с картой - PullRequest
Новая
       16

ReactJs результат setState не отображается с картой

0 голосов
/ 07 мая 2020

Я пытаюсь отобразить мои setState результаты после setState. Мои constructor и componentDidMount(), где я получаю данные из API 

 constructor() {
    super();
    this.state = {
      students: [],
    }
  }
componentDidMount() {
    axios.get("http://localhost:3333/").then((data) => {
      this.setState({students:data.data});
      console.log(this.state.students[0]);
    });
  }

Здесь мой console.log возвращает информацию о моем students[0]

Object { _id: "5eb44aa2bbf7137f6ed8ca3e", username: "User", email: "user@mail.com", mdp: "usermdp" }

Я пытаюсь отрендерить его (вместе со всеми моими другими учениками) с помощью этой функции с сопоставлением 

render() {
return (
  <div>
    <h1>Hello World</h1>
    {this.state.students.map(e  => {
      return (
        <Sub name={e} />
      )}
      )}
  </div>
);

}

Этот рендер использует мой class Sub, что довольно просто 

class Sub extends React.Component {
  render () {
    return (
      <div>
        <h2>{this.props.e}</h2>
      </div>
    );
  }
}

Однако отображается только <h1>Hello World</h1>.

1 Ответ

0 голосов
/ 07 мая 2020

Проблема в .map(), e - это элемент массива для текущей итерации, где вам нужно использовать одно из свойств e. Таким образом вы передаете весь объект вниз. Вторая проблема: e - это просто переменная в родительском компоненте, имя опоры - name в <Sub> компоненте на основе вашего кода <Sub name={e} />.

Вы должны передать username свойство для name prop при использовании компонента <Sub> следующим образом: 

{this.state.students.map(e  => {
  return (
     <Sub name={e.username} /> { /* username property */ }
  )}
)}

У вас должно быть свойство name в <Sub> компоненте, тогда: 

class Sub extends React.Component {
  render () {
    return (
      <div>
        <h2>{this.props.name}</h2>
      </div>
    );
  }
}

Надеюсь это объясняет.

...