Question

我有一种形式，应该从api中获取值。我正在使用axios来获取值。如何在表单字段中显示获取的值？我在哪里可以设置props的值。我正在使用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>
            );
         }
}

Answer 1

您可以直接在componentDidMount方法中进行操作，例如

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

要使上述解决方案正常工作，您需要在actionGetABC操作调用中返回成功操作

Answer 2

让我们考虑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})
}

表格与您的表格相同。您可以直接访问表单中的存储值，但需要为存储在localstate中的textInput的每个onChange事件调用操作。

我尽力解释情况，如有任何建议或疑问，请发表评论

如何使用ComponentDidMount渲染值以在React中形成

2 个答案: