我在React中有一个表单，用户可以在其中查看数据（通过加载时的异步返回）并对其进行内联编辑。如果我通过链接从另一个页面导航到表单，表单按照预期的方式工作，因为数据在主渲染功能之前加载，但是，如果我刷新页面上的表单，尽管数据没有正确填充，它来自道具。
所以：
payload = {
"state": session_id,
"client_id": user.client_id,
"client_secret": user.client_secret,
"code": code,
"grant_type": "authorization_code",
"redirect_uri": "http://localhost:5000"
}
由于表单上的输入具有从Initial render with loading div -> Data comes back -> Props set -> Render fires -> State is set设置的初始值，因此在第二次渲染时它们是空白的。但是，如果我从另一个页面导航到这里，一切都按预期工作。好像我遗漏了一些关于React / Redux的东西。
这是底部的演示组件：
this.state我理解class ContactInfoForm extends React.Component {
constructor (props, context) {
super(props, context);
this.state = Object.assign({}, props.contactInfo);
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render () {
const {
contactInfo
} = this.props;
console.log(this.state); // {} - first render {} - second render
console.log(this.props); // {} - first render {stuff} - second render
return (
<form>
<div className="col-xs-12">
<TextInputGroup
name="email"
value={this.state.email}
onChange={this.handleChange}
floatedLabel="Email/Username"
placeholder="Email/Username"
className="AccountPreferences__field"
labelClass="AccountPreferences__label"
/>
</div>
</form>
);
}
}
是异步的，所以这很有意义，但我想知道在React / Redux中初始化表单的最佳方法是什么。
答案 0 :(得分：1)
当需要对props值发生任何更改时，您需要使用它将被调用的componentWillReceiveProps生命周期方法，这时您需要更新状态值。
使用此：
componentWillReceiveProps(newProps){
this.setState(newProps.contactInfo);
}
<强> componentWillReceiveProps:
在安装的组件之前调用componentWillReceiveProps（） 收到新的道具。如果您需要更新状态以响应 prop更改（例如，重置它），您可以比较this.props 和nextProps并使用this.setState（）执行状态转换 这种方法。