React/Redux——组件的每个实例的独立状态 [英] React/Redux—Individual state for each Instance of a Component

问题描述

如果有一个用户列表并且每个条目都有一个按钮»编辑«.如果用户点击它会发生以下情况:

If have a list of users and each Entry has a button »EDIT«. If the user clicks on it the following happens:

1. 向服务器请求表单
2. 添加组件<UserEditForm/>到entry，什么展开entry

1. request the server for the form
2. Add the component <UserEditForm /> to the entry, what expands the entry

这工作正常，除了一件事:如果单击更多按钮，表单的每个实例都会收到请求的最后一个用户表单的数据.那是因为我在状态中只有一个 userform 属性.

This works fine except one thing: If one clicks further buttons each Instance of the form receives the data of the last user form requested. That is because I have only only one userform property in the state.

所以为了解决这个问题，我想将 userform 交换为 userforms 应该/可能是这样的对象:

So to solve this I want to exchange userform to userforms which should/could be an Object like that:

userforms: {
  <id of first instance>: { … }, //formdata
  <id of second instance>: { … },
  …
}

但由于我是 React/Redux 的新手，我真的不知道如何做到这一点，也不知道什么是正确"的方法，或者最佳实践是什么，才能真正做到这一点.

But since I am new to React/Redux I do not really know how to do that, or what the »right« approach, or best practice is, to actually do it.

我的想法是像这样创建一个更高阶的组件:

My Idea is to create a higher Order Component like so:

import React from 'react';
import {connect} from 'react-redux';
import {uuid} from '../../helpers/uuid';

export const formdatainstance = (FormInstance) => {

  let id = null;

  class FormDataMapper extends React.Component {
    constructor (props) {
      super(props);
      id = uuid();
    }

    render () {
      //extract the formdata from the state
      //using the id
      return <FormInstance { ...this.props } />
    }
  }

  const mapStateToProps = (state) => {
    console.log(id); //is null for one run
    return {
      userforms: state.userforms
    };
  };

  return connect(mapStateToProps)(FormDataMapper);
}

所以在 List 组件中我可以:

So in the List component I can:

import UserEditForm from './UserEditForm';
import {formdatainstance} from './formdatainstance';

const MappedUserEditForm = formdatainstance(UserEditForm);

class List extends React.Component {
  render(){
    return (
      {users.map(user => {
        //more stuff
        <MappedUserEditForm />
        //more stuff
      })}
    );
  }
}

所以我的问题是:这是个好主意吗?如果是，进行清理的正确方法是什么，那么在组件的生命周期中何时应该从状态中删除数据?还有其他更简单的方法吗?

So my Question: Is this a good Idea? If yes what would be the proper way to do the cleanup, so when in the life cycle of the component should I delete the data from the state? Is there another way to do that, which is easier?

感谢您的帮助！

推荐答案

这是您可以执行的操作...

Here's what you can do...

import React from 'react';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';

class UserEditForm extends Component {
   ...

   render() {
      return <form onSubmit={this.props.handleSubmit(this.props.onSubmit)}>
          ...form fields
      </form>
   }
}

const mapStateToProps = (state, ownProps) => {
   return {
      form: ownProps.formId
   }
}

export default compose(
   connect(mapStateToProps),
   reduxForm({
      //...other redux-form options
   })
)(UserEditForm);

您的列表组件

render() {
   return <ul>
      {this.props.users.map(user => 
         <li key={user.id}>
             ...
             <UserEditForm formId={'form-' + user.id} onSubmit={...} />
         </li>
      )}
   </ul>
}

这允许您拥有动态表单名称.

This allows you to have a dynamic form name.

这篇关于React/Redux——组件的每个实例的独立状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！