Как использовать ComponentDidMount для визуализации значений для формирования в реакции - PullRequest
Новая
       21

Как использовать ComponentDidMount для визуализации значений для формирования в реакции

0 голосов
/ 27 сентября 2018

У меня есть форма, для которой значения должны быть получены из API.Я использую Axios, чтобы получить значения.Как отобразить извлеченные значения в полях формы?Где я могу установить значение реквизита в состояние.Я использую Redux для управления глобальным состоянием. 

class ABC extends Component{
    constructor(props){
    super(props);
    this.state={
       name:"",
       email:"" //can i set the value of props here?
    }
ComponentDidMount{
     this.props.actionGetABC();  //Call to action to fetch details from API
}
       render(){
         return(
             <div>
               <Form>
                <Form.Input
                inline 
                required
                label="Email"
                type="email"
                value={this.state.email} //How change i render the value 
                                          fetched from api here?
                onChange={this.handleChangeEmail}
                />
                <Form.Input
                inline
                required
                label="Name"
                type="text"
                icon="user"
                value={this.state.name}
                onChange={this.handleChangeName}
                />
              </Form>
             </div>
            );
         }
}

Ответы [ 2 ]

0 голосов
/ 27 сентября 2018

Давайте рассмотрим form - это состояние вашего магазина с объектом profileForm, в котором хранятся значения формы профиля с полями name и email (значение, полученное из API) 

const mapStateToProps = (state) =>({
    form: state.profileForm
});
const mapDispatchToProps=()=>({
   ....//your action call  actionGetABC() code your aware of it
})

соедините его с вашим компонентом формыconnect(mapStateToProps,mapDispatchToProps)(FormComponent)

Теперь в FormComponent UNSAFE_componentWillReceiveProps(nextProps) устарела 

UNSAFE_componentWillReceiveProps(nextProps){
   if(nextProps.name && nextProps.email) //checking data available in profileForm (name and email received from API)
   this.setState({name:nextProps.name, email:nextProps.email})
}

Форма такая же, как у вас.Вы можете напрямую получить доступ к значению хранилища в форме, но вам нужно вызывать action для каждого события onChange textInput, хранящегося в localstate.

Я изо всех сил пытался объяснить случай, если есть предложения или вопросы, просьба прокомментировать

0 голосов
/ 27 сентября 2018

Вы можете сделать это непосредственно в методе componentDidMount, например 

ComponentDidMount{
     this.props.actionGetABC().then( data => {
        this.setState({
           name: data.name,
           email: data.email
         });
     }); //Call to action to fetch details from API
}

, чтобы вышеуказанное решение работало, и вам необходимо вернуть успешное действие в вызове действия actionGetABC

...