Javascript 在componentWillReceiveProps之后和componentDidUpdate之前渲染

我的问题是：

我是reactjs的新手，我正在尝试使用SWAPI（SWAPI.co）制作这个应用程序。现在我需要列出字符和一些关于它们的信息。问题是我有一个名为

SelectedCharacter

的组件，它返回一些关于在div中选择的字符的信息

当一个角色通过道具传递到此组件时，我通过xmlhttp得到一个响应，并显示信息。问题是，在提取数据时，我想放置一条

“加载…”

消息。我就是这样想的：

我设置了

componentWillReceiveProps

函数，在这里我测试是否需要加载内容和

componentdiddupdate

，在这里我从这个api获取数据并更新状态

从react生命周期中，我知道在

组件WillReceiveProps

和

组件DidUpdate

之间调用渲染，事实确实如此

因此，我预计如果我这样做：

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

render（）{
如果（标准）{
返回加载。。。
}
}

问题是：即使这个条件是真的（我使用

console.log（）

）对其进行了测试），消息在下次重新呈现之前不会显示。我是不是做错了什么？如果有帮助，我的代码在，问题是在src粘贴中选择的_characters.js

---

谢谢

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

---

1.调用

forceUpdate

调用

setState

将触发渲染，因此此处不需要调用

forceUpdate

。这意味着发生的渲染比您预期的要多

我相信这可能是你的问题的原因，原因相当复杂。从

setState（）

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

从

调用

forceUpdate（）

将导致对组件调用render（）

我的理论是，由

setState

触发的调用呈现，异步地将

加载

设置为

true

，被延迟，来自

forceUpdate

的调用呈现首先潜入，而

加载

仍然为false

2.更新

props

组件永远不应该更新自己的

道具

。通常，这将存储在

状态

中

有关详细信息，请阅读和

3.导入axios，但不使用它 这并不是一个真正的问题（除了一个未使用的导入），可能只是为您的前进方向做准备。axios为http请求提供了比

XMLHttpRequest

（在我看来）更好的开发人员体验，并将大量清理

fetchData

函数，这将使故障排除更容易

---

---

我希望这能帮点忙，你也很享受。请随时在评论或新问题中跟进这些要点。

谢谢，我会在继续之前解决这些问题。

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

this.props.selected.moviesList = moviesListNames;

import axios from 'axios'