Javascript 如何使用react和redux制作用户表单？

当我的应用程序首次加载时，它从服务器获取用户数据，并在AppBar（材质ui）中呈现用户信息：

displayProfileLink（）{
const{user}=this.props；
如果（！user.name）{
返回
}否则{
返回
{user.name}
}
}

如您所见，有一个指向配置文件组件的链接。用户配置文件组件基本上是更新用户数据的表单。问题是，当您第一次使用url上的/profile打开应用程序时，组件在从服务器获取用户数据之前呈现，因此表单输入为空，您需要导航到其他链接并返回以查看输入上的用户数据

当用户获取完成时，我如何更新输入值，而不需要在其他链接之间切换？如果我使用组件状态来控制输入值，那么当组件挂载但尚未获取用户数据时，就会设置该状态

下图显示了问题：

关于英语，我很抱歉，非常感谢。 @---编辑

如您所见，我可以将用户名“Rodrigo”放在AppBar上，但是当用户表单组件加载时，如果我使用组件状态控制输入值设置组件状态和来自redux的用户状态，它们将为空，因为尚未获取用户信息。appbar显示名称，因为它在获取用户数据后再次呈现，但我无法对表单执行相同的操作

User.jsx

componentDidMount() {
    const {user} = this.props;
    if (user.name) {
      this.setState({
        monetizze_x_consumer_key: user.monetizze_x_consumer_key,
        eduzz_api_key: user.eduzz_api_key,
        eduzz_public_key: user.eduzz_public_key
      })
    }
  }
<TextField          
  helperText="monetizze_x_consumer_key"
  label="Chave para geração de Token Monetizze"
  value={this.state.monetizze_x_consumer_key}
  fullWidth={true}
  required={true}
  id="monetizze_x_consumer_key"
  onChange={(event) => this.setState({monetizze_x_consumer_key: event.target.value})}
/>

componentDidMount（）{
const{user}=this.props；
if（用户名）{
这是我的国家({
货币化用户密钥：user.monetize用户密钥，
eduzz_api_密钥：user.eduzz_api_密钥，
eduzz_公钥：user.eduzz_公钥
})
}
}
this.setState（{monetize_x_consumer_key:event.target.value}）
/>

---

当componentDidMount运行时，用户数据尚未就绪，因此组件状态仍为空值，如何在获取用户数据后再次设置状态？

您可以使用componentWillMount（）生命周期进行设置

首先，如果您获取的数据在数组中，则使用空数组定义状态；如果您获取的数据在字符串中，则使用空字符串定义状态

然后定义componentWillMount（）并在此生命周期中点击api，在收到响应时设置状态，然后根据需要使用状态。

解决方法：

componentWillReceiveProps(nextProps)

---

即使在呈现应用程序组件之前，我也在获取用户数据，我可以更改状态，状态有用户信息，我可以从组件访问，问题只是页面首次加载时的表单输入。为了更好地理解，我将设置一个打印屏幕

componentWillReceiveProps(nextProps)