在componentWillReceiveProps之后和componentDidUpdate之前渲染

Question

这是我的问题：

我是reactjs的新手，我试图使用SWAPI（swapi.co）制作这个应用程序。现在我需要列出字符和一些有关它们的信息。问题是我有一个名为SelectedCharacter的组件，它返回有关在div中选择的字符的一些信息。

当一个角色通过道具传递给这个组件时，我会通过xmlhttp得到一个响应并显示信息。问题是我想在获取数据时发出"Loading..."消息。这就是我试图解决的问题：

我设置了componentWillReceiveProps函数，在那里我测试我是否需要加载东西和componentDidUpdate，我从这个api中获取数据并更新状态。

我知道，从反应生命周期来看，在componentWillReceiveProps和componentDidUpdate之间调用渲染，确实是。

那么，我想，如果我这样做了：

render() {
  if (criteria) {
    return <div>Loading...</div>
  }
}

问题是：即使此条件为真（我使用console.log()进行了测试），该消息也不会显示，直到下一次重新渲染。我在这做错什么吗？如果有帮助，我的代码位于github.com/piubellofelipe/StarWars，问题出在src paste中的selected_characters.js。

由于

Answer 1

我一直在看你的代码，试图为你解决这个问题，我没有给你任何具体的答案，但我注意到一些可能使事情变得有些不可预测的事情。

1。致电forceUpdate

componentWillReceiveProps(){
    this.setState({loading:true})
    this.forceUpdate();
}

调用setState会触发渲染，因此此处不需要调用forceUpdate。这意味着渲染的次数比您预期的要多。

我认为这可能是导致您的问题的一个非常复杂的原因。来自setState docs

  

... setState()也是异步的，同一周期内的多个调用可以一起批处理。

来自forceUpdate docs

  

调用forceUpdate()将导致在组件上调用render（）...

我的理论是，由setState触发的调用呈现，异步设置loading到true，正在被延迟，而来自forceUpdate的那个首先潜入，而loading仍然是假的。

2。正在更新props

this.props.selected.moviesList = moviesListNames;

组件永远不应该永远更新自己的props。通常，这将存储在state中。

有关详细信息，请阅读this section of the docs和this answer。

3。导入axios但不使用它

import axios from 'axios'

这个问题不是真正的问题（除了未使用的导入），可能只是为你前进的地方做准备。对于http请求，axios为XMLHttpRequest（在我看来）提供了更好的开发人员体验，并将清理fetchData函数，这将使故障排除更容易。

我希望这有点帮助，你很享受React。请随意在评论中或在新问题上跟进这些要点。