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

【问题标题】：How to make user form with react and redux?如何使用 react 和 redux 制作用户表单？
【发布时间】：2018-10-02 08:52:18
【问题描述】：

当我的应用程序第一次加载时，它会从服务器获取用户数据并在 AppBar (material-ui) 中呈现用户信息：

displayProfileLink () {
    const {user} = this.props;
    if (!user.name) {
      return <CircularProgress style={{color: 'white'}}/>
    } else {
      return <Button component={Link} to="/profile">
        {user.name}
      </Button>
    }
  }

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

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

下图显示了问题：

对不起英文，非常感谢。 @---编辑

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

用户.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运行时，用户数据还没有准备好，所以组件状态一直是空值，获取到用户数据后如何重新设置状态？

【问题讨论】：

标签： javascript reactjs forms redux

【解决方案1】：

您可以使用 componentWillMount() 生命周期来做到这一点。

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

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

【讨论】：

我什至在呈现 App 组件之前就在获取用户数据，我能够更改状态，状态具有用户信息并且我可以从组件访问，问题只是页面首次加载时的表单输入。我会放一个打印屏幕以便更好地理解

【解决方案2】：

解决者：

componentWillReceiveProps(nextProps)

【讨论】：