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

Question

when my application first loads, it fetches the user data from the server and renders the user information in a 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>
    }
  }

As you can see, there is a link to a profile component. The user profile component is basically a form to update user data. The issue is that when you first open the application using the /profile on the url, the component renders before the user data is fetched from the server, consequently the form inputs are empty and you need to navigate to other link and come back to see the user data on the inputs.

How can I update the value of the inputs when the user fetch is done without needing to switch between other links? If I use the component state to control the input values, the state is set when the component mounts but there is no user data fetched yet.

The picture bellow shows the problem:

Sorry about the English, thank you very much. @---edit

As you can see I can put the user name "Rodrigo" at the AppBar, but when the user form component loads if I use the component state to control the input values setting the component state with the user state from redux they will be empty because the user info is not fetched yet. The appbar displays the name because it render again after the user data is fetched but I'm not able to do the same thing with the form.

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})}
/>

When componentDidMount runs, the user data is not ready yet, so the component state remains with empty values, how could I set the state again after the user data is fetched?

Answer 1

I think you should change state for that purpose. I suggest reading this article: https://blog.hellojs.org/fetching-api-data-with-react-js-460fe8bbf8f2

Answer 2

You can do it with componentWillMount() Life Cycle.

First of all define state with empty array if data you fetch is in array or empty string if you fetch data is in string.

then define componentWillMount() and hit api in this life cycle and set state when you receive response and after that use your state as you want.

Answer 3

解决者：

componentWillReceiveProps(nextProps)