Не передаются данные из response в state

241

09 февраля 2018, 22:42

Данные приходят с сервера, но не попадают в state (использовал breakpoint) и поэтому, как я понял, ломается map(). Хотелось бы узнать, что я делают не так.

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      users: [],
    }
  }
  componentDidMount(){
    this.getData();
  }
  getData = () => {
    fetch('url') //url with json data
        .then( response => response.json()) // 
        .then((data) => { // console.log(data) -> Array (32) {id: 13, firstName: 'Ivan', ...}
          this.setState({
            users: data.user,
          });
        })

  }
  render(){
      return(
        <div>
          {this.state.users.map((firstName) =>{ // Cannot read property 'map' of undefined
            return(
              <h1>{firstName}</h1>
            )
          })}
        </div>
      )
    }
  }

Answer 1

Дело в том что componentDidMount() вызывается лишь раз после рендера и по этому в state не успевают попадать ваши данные. Вам нужно использовать componentWillMount() данный метод вызывается до рендера. Пример того как сейчас у вас работает: Мы вызывает render -> далее мапим this.state.users -> он ничего не находит и вызывает ошибку -> вызываем getData() -> записываем данные в state.

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      users: [],
    }
  }

  componentWillMount(){
    this.getData();
  }
  getData = () => {
    fetch('url') //url with json data
        .then((response) => {
          response.json().then((data) => {
             this.setState({
               users: data
             });
          });
    })
  }
  render(){
      return(
        <div>
          {this.state.users.map((user, id) =>{
            return(
              <h1 key={id}>{user.firstName}</h1>
            )
          })}
        </div>
      )
    }
  }