Question

在React中，我尝试使用redux-form执行API更新调用。我可以在initialize的帮助下在编辑表单中获取数据。它运作良好。除非用户刷新浏览器。在这种情况下，我无法在initialize中获取数据，因为它在道具/州中不可用。

constructor(props){
  super(props);
}

 componentWillMount(){
    this.props.fetchUser(this.props.params.id);
 }

render() {
 const InitlValues = {
  initialValues: {
    "name": this.props.user.name,
    "city": this.props.user.city
  }
}
const { handleSubmit } = this.props;
return(
  <form goes here..>
);

我确实尝试了React生命周期方法componentWillMount来获取数据，但它似乎无法正常工作。

当用户刷新浏览器时，会抛出错误：

未捕获的TypeError：无法读取属性＆＃39; name＆＃39;为null

当用户刷新页面时，我应该如何处理获取/保留数据？

Answer 1

这不是一个特殊的redux-form问题，它是在单个页面应用程序中维护刷新应用程序状态的一般问题。使用redux，您可以存储需要通过localStorage中的刷新持久化的状态 - 在本例中为表单状态。你可以手工做到这一点＆＃34;＃34;通过创建redux middleware，或者这样：https://github.com/elgerlambert/redux-localstorage

Answer 2

要真正避免Uncaught TypeError: Cannot read property 'name' of null您需要为您的班级/组件定义defaultProps。

这里究竟发生了什么，因为您的API操作是异步的并且需要时间来获取数据，this.props.user会返回undefined，而this.props.user.name会使Uncaught TypeError抛出{{1} }}

尝试这样的事情：

static defaultProps = {
 user: { name: '', city: '' }
}

constructor(props){
  super(props);
}

 componentWillMount(){
    this.props.fetchUser(this.props.params.id);
 }

render() {
 const InitlValues = {
  initialValues: {
    "name": this.props.user.name,
    "city": this.props.user.city
  }
}
const { handleSubmit } = this.props;
return(
  <form goes here..>
);

PS：如果你真的想坚持你的redux状态，你应该使用Redux Middleware将你所在州的部分存储在本地存储或会话存储中。更多关于使用redux自己的创建者的中间件：Building React Applications with Idiomatic Redux

Reactjs：在页面刷新时获取/保留redux表单数据

2 个答案: