javascript - 组件不在状态更改时重新渲染？

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

React LifeCycle 函数序列是Constructor 然后调用render 方法。在构造方法中，它初始化当前为空用户数组的状态。现在它调用 render() 方法，因为 this.state.user 是一个空数组，引用其中的内容会出错

this.state.user.user.playcount

如果你没有 if 条件，这将产生一个错误。在第一次渲染后它会调用 componentDidMount，现在你获取一些更新状态。当 setState 发生时，render 将被再次调用现在你在 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'}

希望这对您有所帮助。