Компонент не перерисовывается при изменении состояния?

Question

Каждый раз, когда вызывается setState (), кажется, что компонент не перерисовывается.Как вы можете видеть из моих комментариев, состояние действительно меняется, и рендеринг, кажется, вызывается снова, но если я не добавлю это выражение if и просто добавлю тег абзаца, который отображает данные, это выдаст мне ошибку.Я уверен, что упускаю что-то простое, но любая помощь приветствуется.

import React from "react";
import axios from "axios";
import { constants } from "../constants/constants";
const { baseURL, apiKey, userName } = constants;

class User extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    user: []
  };
}
componentDidMount() {
  let getUserInfo = axios.create({
    baseURL,
    url: `? 
    method=user.getinfo&user=${userName}&api_key=${apiKey}&format=json`
   });
  getUserInfo().then(response => {
  let data = response.data;
  console.log(data.user.playcount); //logs second, displays correct
  this.setState(state => ({
    user: data
  }));
});
}

render() {
  console.log(this.state); //logs first and third, doesn't work on first but does on third
  let toReturn;
  if (this.state.user.length > 0) {
    toReturn = <p>{this.state.user.user.playcount}</p>;
  } else {
    toReturn = <p>didn't work</p>;
  }
  return <div>{toReturn}</div>;
  }
}

export default User;

Answer 1

Я думаю, что ваша проблема может быть связана с изменением формы значения user.Вы инициализируете значение пустым массивом, но затем - после извлечения - вы предполагаете, что это объект (с помощью user.user).

Возможно, вы могли бы немного упростить код, чтобы он выглядел больше какодин ниже?

/* imports */

class User extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: null // Make it explicit there's no value at the beginning.
    };
  }

  componentDidMount() {
    let getUserInfo = axios.create(/* ... */);
    getUserInfo().then(response => {
      let data = response.data;
      this.setState({ // No need to for a setter function as you dno't rely on the previous state's value.
        user: data.user // Assign the user object as the new value.
      });
    });
  }

  render() {
    let toReturn;
    // Since it's now a `null`, you can use a simple existence check.
    if (this.state.user) {
      // User is now an object, so you can safely refer to its properties.
      toReturn = <p>{this.state.user.playcount}</p>;
    } else {
      toReturn = <p>No data yet.</p>;
    }
    return <div>{toReturn}</div>;
  }
}

export default User;

Answer 2

Реагирует последовательность функций LifeCycle на Constructor и затем вызывает метод render.В методе конструктора он инициализирует состояние, которое в данный момент является пустым пользовательским массивом.Теперь он вызывает метод render (), так как this.state.user является пустым массивом, и ссылка на что-то из него выдает ошибку

this.state.user.user.playcount

, что приведет к ошибке, если у вас нет условия if.После первого рендера он вызовет componentDidMount, теперь вы получаете что-то обновленное состояние.Когда произошел setState, рендеринг будет вызван снова. Теперь у вас есть что-то в this.state.user, тогда произойдет отображение.

this.state.user.length > 0 is true

Посмотрите на это: https://reactjs.org/docs/react-component.html и https://reactjs.org/docs/conditional-rendering.html

Вы можете исправить в одном теге

, используя условный рендеринг, подобный этому

<p>{this.state.user.length ? this.state.user.user.playcount : 'loading'}

Надеюсь, это поможет.