Reactjs 当反应性地更改页面上的内容时，Redux表单呈现为单元化状态（且无法初始化）

在过去的几天里，我遇到了一个似乎无法解决的问题

我想做什么：我们有一个侧边栏，您可以从中选择“研究”。本研究确定您在主内容块上看到的内容，因为每个研究都有不同的数据和与之相关的用户。在主内容块中，我为每个用户设置了表单

问题：在第一页加载时，一切正常。但是，如果您更改了研究，从而使用componentWillReceiveProps重新呈现页面，则加载的新表单在那里，但具有空值（无初始值）和初始化值

false

。它们也不能以任何方式选择-表单本身是一个选择下拉列表和3个复选框，您不能选择其中任何一个

刷新页面会使表单再次工作，即使在新的研究中也是如此

我所尝试的：

• 使用

  this.props.dispatch（initialize（form_name））

  手动初始化表单。这会导致使用正确的值初始化表单，但仍然无法以任何方式与表单交互
• 手动更新（this.forceUpdate）家长的研究道具更改。这并没有改变什么
• 将

  启用重新初始化

  设置为

  真

• 为父页面提供一个

  键

  ，使其每次都呈现新鲜（我认为这是一个可行的方法，但不是我做得不对就是没有效果。）
• 在转换学习道具的过程中破坏旧的形式

下面是父组件和表单组件的代码。这个侧边栏在一个单独的组件中，如果出于某种原因想看到它，请询问。这些文件中有很多内容，主要是应用程序的其他无关UI内容，但我注意到表单在父级中呈现的位置，使用

//这里呈现的是有问题的表单

家长

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import IconButton from 'material-ui/IconButton';
import Button from 'material-ui/Button';
import InviteUsersDialog from './InviteUsersDialog';
import SwipeableViews from 'react-swipeable-views';
import AppBar from 'material-ui/AppBar';
import Tabs, { Tab } from 'material-ui/Tabs';

import Avatar from 'material-ui/Avatar';
import tempAvatar from '../../Assets/temp-avatar.jpg';

import ExpansionPanel, {
  ExpansionPanelDetails,
  ExpansionPanelSummary,
} from 'material-ui/ExpansionPanel';

import Typography from 'material-ui/Typography';

import ExpandMoreIcon from 'material-ui-icons/ExpandMore';

import { withRouter } from 'react-router-dom';
import { withStyles } from 'material-ui/styles';
import { connect } from 'react-redux';

import { getUsersAction, getInvestigationPermissionsAction, resetUsersError, destroyFormsAction } from '../../actions/manage';

import { MenuItem } from 'material-ui/Menu';
import { Field, FieldArray, reduxForm, getFormValues, change, reset, destroy } from 'redux-form';

import {
  Checkbox,
  RadioGroup,
  Select,
  TextField,
  Switch,
} from 'redux-form-material-ui'

import PermissionsForm from './PermissionsForm';

import compose from 'recompose/compose';

class Manage extends Component {

    constructor(props) {
        super(props);
        if (this.props.investigation) {
            this.props.getUsersAction(this.props.investigation)
        }
    }

    state = {
        inviteOpen: false,
        expanded: null,
        value: 0
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.investigation !== nextProps.investigation) {
            this.props.getUsersAction(nextProps.investigation)

        }
    }

    handleInviteOpen = () => {
        this.setState({
            inviteOpen: true
        })
    }

    updateOnSave = () => {
        this.setState({
            expanded: null
        })
        this.props.getUsersAction(this.props.investigation).then(() => {
            this.props.getInvestigationPermissionsAction(this.props.investigation)
        })
    }

    closeOnCancel = () => {
        this.setState({
            expanded: null
        })
    }

    closeDialog = () => {
        this.setState({
            inviteOpen: false
        })
    }

    handleChange = (event, value) => {
        console.log(value)
        this.setState({ value });
    };

    handleChangeIndex = index => {
        this.setState({ value: index });
    };

    handleExpansionChange = panel => (event, expanded) => {
        this.setState({
          expanded: expanded ? panel : false,
        });
    }

    render() {
        const { expanded } = this.state;
        let inviteUsers = null;
        if (this.state.inviteOpen === true) {
            inviteUsers = (
                <InviteUsersDialog open={this.state.inviteOpen} updateOnSave={this.updateOnSave} closeDialog={this.closeDialog}/>
            )
        } else {
            inviteUsers = null;
        }

        if (this.props.usersError) {
            this.props.history.push('/dash')
            this.props.resetUsersError()
        }

        let usersList = null;
        if (this.props.users) {
            console.log("USERS:", this.props.users)
            usersList = (
                <div className={this.props.classes.usersExpansions}>
                    <ExpansionPanel className={this.props.classes.expansionPanel} expanded={false}>
                      <ExpansionPanelSummary className={this.props.classes.expansionSummary} expandIcon={<ExpandMoreIcon className={this.props.classes.headerExpandMore}/>}>
                        <div className={this.props.classes.headerAvatarContainer}>
                            <div className={this.props.classes.userInfo}>
                                <Typography className={this.props.classes.headingName}>Name</Typography>
                                <Typography className={this.props.classes.headingEmail}>Email</Typography>
                            </div>
                        </div>
                        <Typography className={this.props.classes.headerStatus}>Status</Typography>
                        <Typography className={this.props.classes.headerPermissions}>Permissions</Typography>
                      </ExpansionPanelSummary>
                    </ExpansionPanel>
                {this.props.users.currentUsers.map((user) =>
                    <ExpansionPanel className={this.props.classes.expansionPanel} expanded={expanded === user.email + '-' + this.props.investigation} onChange={this.handleExpansionChange(user.email + '-' + this.props.investigation)}>
                      <ExpansionPanelSummary className={this.props.classes.expansionSummary} expandIcon={<ExpandMoreIcon />}>
                        <div className={this.props.classes.avatarContainer}>
                            <Avatar
                                alt={user.name}
                                src={user.avatarImg ? "data:image/jpeg;base64," + user.avatarImg : tempAvatar}
                                className={this.props.classes.avatar}
                                style={{ borderRadius: 2.1 }}
                            />
                            <div className={this.props.classes.userInfo}>
                                <Typography className={this.props.classes.headingName}>{user.name}</Typography>
                                <Typography className={this.props.classes.headingEmail}>{user.email}</Typography>
                            </div>
                        </div>
                        <Typography className={this.props.classes.status}>{expanded === user.email + '-' + this.props.investigation ? '' : 'Activated'}</Typography>
                        <Typography className={this.props.classes.headingPermissions}>{expanded === user.email + '-' + this.props.investigation ? '' : user.permissionsArr.join(', ')}</Typography>
                      </ExpansionPanelSummary>
                      <ExpansionPanelDetails className={this.props.classes.detailsContainer}>
                        //FORM IN QUESTION IS RENDERED HERE
                        <PermissionsForm 
                         form={`PermissionsForm_${user.identifier + '-' + this.props.investigation}`} 
                         updateOnSave={this.updateOnSave} closeOnCancel={this.closeOnCancel} 
                         loggedInUser={user.email === localStorage.getItem('userEmail') ? true : false} 
                         formName={`PermissionsForm_${user.identifier + '-' + this.props.investigation}`} 
                         initialValues={{identifier: user.identifier, viewPermissions: user.permissions.viewEntries === true ? 'allEntries' : 'ownEntries', addEntriesPermissions: true, exportPermissions: user.permissions.export, manageInvestPermissions: user.permissions.manageInvest}}/>
                      </ExpansionPanelDetails>
                    </ExpansionPanel>
                )}
                {this.props.users.pendingUsers.map((user) =>
                    <ExpansionPanel className={this.props.classes.expansionPanel} expanded={false} onChange={this.handleExpansionChange(user.email + '-' + this.props.investigation)}>
                      <ExpansionPanelSummary className={this.props.classes.expansionSummary} expandIcon={<ExpandMoreIcon className={this.props.classes.headerExpandMore}/>}>
                        <div className={this.props.classes.avatarContainer}>
                            <Avatar
                                alt={user.name}
                                src={tempAvatar}
                                className={this.props.classes.avatar}
                                style={{ borderRadius: 0 }}
                            />
                            <div className={this.props.classes.userInfo}>
                                <Typography className={this.props.classes.headingEmail}>{user.email}</Typography>
                            </div>
                        </div>
                        <Typography className={this.props.classes.status}>Pending</Typography>
                        <Typography className={this.props.classes.headingPermissions}>{user.permissionsArr.join(', ')}</Typography>
                      </ExpansionPanelSummary>
                    </ExpansionPanel>
                )}
                </div>
            )
        }
        return (
            <div className={this.props.classes.container}>
                <div className={this.props.classes.pageHeaderContainer}>
                    <h2 className={this.props.classes.title}>Manage users</h2>
                    <Button color="primary" raised className={this.props.classes.inviteButton} onClick={this.handleInviteOpen}>Invite user</Button>
                </div>
                {inviteUsers}
                <AppBar position="static" color="default" className={this.props.classes.tabsAppBar}>
                  <Tabs
                    value={this.state.value}
                    onChange={this.handleChange}
                    indicatorColor="primary"
                    textColor="primary"
                    fullWidth
                    className={this.props.classes.tabs}
                  >
                    <Tab label="People" />
                    <Tab label="Groups" />
                  </Tabs>
                </AppBar>
                <SwipeableViews
                  axis={'x'}
                  index={this.state.value}
                  onChangeIndex={this.handleChangeIndex}
                >
                <div className={this.props.classes.peopleContainer}>
                    {usersList}
                </div>
                <div>

                </div>
                </SwipeableViews>
            </div>
        );
    }
}


const styles = {
};

function mapStateToProps(state, ownProps) {
  return { 
    investigation: state.manage.savedInvest,
    users: state.manage.authorizedUsers,
    usersError: state.manage.usersError
  };
}


export default compose(
  withRouter,
  connect(mapStateToProps, {getUsersAction, getInvestigationPermissionsAction, resetUsersError, destroyFormsAction}),
  withStyles(styles)
)(Manage);

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“物料界面/图标按钮”导入图标按钮；
从“物料界面/按钮”导入按钮；
从“/InviteUsersDialog”导入InviteUsersDialog；
从“react SwipeableView”导入SwipeableView；
从“物料ui/AppBar”导入AppBar；
从“物料界面/选项卡”导入选项卡，{Tab}；
从“材质ui/化身”导入化身；
从“../../Assets/temp avatar.jpg”导入tempAvatar；
导入扩展面板{
扩展面板详细信息，
扩展面板摘要，
}来自“材料ui/扩展面板”；
从“材料界面/排版”导入排版；
从“材料ui图标/ExpandMore”导入ExpandMoreIcon；
从“react router dom”导入{withRouter}；
从“材质ui/样式”导入{withStyles}；
从'react redux'导入{connect}；
从“../../actions/manage”导入{getUsersAction，getInvestigationPermissionsAction，resetUsersError，destroyFormsAction}；
从“物料界面/菜单”导入{MenuItem}；
从'redux form'导入{Field，FieldArray，reduxForm，getFormValues，change，reset，destroy}；
进口{
复选框，
放射组，
选择，
TextField，
转换
}从“重复使用表单材质ui”
从“/PermissionsForm”导入PermissionsForm；
从“重新组合/组合”导入组合；
类管理扩展组件{
建造师（道具）{
超级（道具）；
如果（本道具调查）{
this.props.getUsersAction（this.props.investment）
}
}
状态={
开：错，
扩展：null，
数值：0
}
组件将接收道具（下一步）{
if（this.props.investment！==nextrops.investment）{
this.props.getUsersAction（nextrops.investment）
}
}
handleInviteOpen=（）=>{
这是我的国家({
开放：是的
})
}
更新保存=（）=>{
这是我的国家({
扩展：空
})
this.props.getUsersAction（this.props.investment）。然后（（）=>{
this.props.getInvestigation许可证（this.props.investigation）
})
}
closeOnCancel=（）=>{
这是我的国家({
扩展：空
})
}
closeDialog=（）=>{
这是我的国家({
开放：假
})
}
handleChange=（事件、值）=>{
console.log（值）
this.setState（{value}）；
};
handleChangeIndex=索引=>{
this.setState（{value:index}）；
};
handleExpansionChange=panel=>（事件，展开）=>{
这是我的国家({
已展开：已展开？面板：false，
});
}
render（）{
const{expanded}=this.state；
让inviteUsers=null；
if（this.state.inviteOpen===true）{
邀请用户=(
)
}否则{
inviteUsers=null；
}
if（this.props.usersError）{
this.props.history.push（“/dash”）
this.props.resetUsersError（）
}
让usersList=null；
if（this.props.users）{
log（“用户：”，this.props.USERS）
用户列表=(
名称
电子邮件
地位
权限
{this.props.users.currentUsers.map（（用户）=>
{user.name}
{user.email}
import React from 'react';
import Dialog, {
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
} from 'material-ui/Dialog';

import Button from 'material-ui/Button';
import Input, { InputLabel } from 'material-ui/Input';

import { withStyles } from 'material-ui/styles';

import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';

import Typography from 'material-ui/Typography';

import Divider from 'material-ui/Divider'

import SelectBase from 'material-ui/Select';
import { MenuItem } from 'material-ui/Menu';
import { Field, FieldArray, reduxForm, getFormValues, change, reset, initialize } from 'redux-form';
import { patchPermissionsAction } from '../../actions/manage';
import { resetFormsAction } from '../../actions/dashboard';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';

import Tooltip from 'material-ui/Tooltip';

import PropTypes from 'prop-types';

import compose from 'recompose/compose';

import {
  Checkbox,
  RadioGroup,
  Select,
  TextField,
  Switch,
} from 'redux-form-material-ui'

const required = value => (value == null ? 'Required' : undefined)

class PermissionsForm extends React.Component {
  constructor(props) {
    super(props);
  }

  static contextTypes = {
    form: PropTypes.string
  }
  submit = (values) => {
    this.props.patchPermissionsAction(values, this.props.investigation).then(() => {
      this.props.updateOnSave();
    })
  }

  handleCancel = () => {
    this.props.closeOnCancel();
    this.props.dispatch(reset(this.props.formName))
  }

  componentDidUpdate() {
    console.log("!")
    if(!this.props.initialized) {
      console.log("!!")
    }
  }

  componentWillUnmount() {

  }

  render() {
    const { handleSubmit, pristine, reset, submitting } = this.props

    let managePerm = null;
    if (this.props.loggedInUser) {
      managePerm = (
        <Tooltip id="tooltip-top-start" title="Coming soon" placement="top">
          <Typography className={this.props.classes.status}>Manage users</Typography>
        </Tooltip>
      )
    } else {
      managePerm = (<Typography className={this.props.classes.status}>Manage users</Typography>)
    }

    return (
      <div className={this.props.classes.permFormContainer}>
        <Divider />
        <form onSubmit={ handleSubmit(this.submit) }>
        <div className={this.props.classes.innerFormContainer}>
            <div className={this.props.classes.groupsContainer}>
            <br/>
            </div>
            <div className={this.props.classes.fieldContainer}>
              <Typography className={this.props.classes.status}>View</Typography>
              <Field name="viewPermissions" component={Select}>
                <MenuItem value="ownEntries">View own entries</MenuItem>
                <MenuItem value="allEntries">View all entries</MenuItem>
              </Field>
            </div>
            <div className={this.props.classes.fieldContainer}>
            <Tooltip id="tooltip-top-start" title="Coming soon" placement="top">
              <Typography className={this.props.classes.status}>Add entries</Typography>
            </Tooltip>
            <Field
              name="addEntriesPermissions"
              component={Checkbox}
              normalize={v => !!v}
              disabled={true}
            />
            </div>
            <div className={this.props.classes.fieldContainer}> 
            <Typography className={this.props.classes.status}>Export data</Typography>
            <Field
              name="exportPermissions"
              component={Checkbox}
              normalize={v => !!v}
            />
            </div>
            <div className={this.props.classes.fieldContainer}>
            {managePerm}
            <Field
              name="manageInvestPermissions"
              component={Checkbox}
              normalize={v => !!v}
              disabled={this.props.loggedInUser === true ? true : false}
            />
            </div>
          </div>
        <Divider />
        <div className={this.props.classes.actionButtons}>

          <Tooltip id="tooltip-top-start" title="Coming soon" placement="top">
          <Button color="error" className={this.props.classes.deleteButton}>
            Delete account
          </Button>
          </Tooltip>
          <div className={this.props.classes.saveAndCancelButtons}>
            <Button onClick={this.handleCancel} className={this.props.classes.cancelButton}>
              Cancel
            </Button>
            <Button type="submit" disabled={submitting} color="primary" className={this.props.classes.saveButton}>
              Save
            </Button>
          </div>
        </div>
        </form>
      </div>
    );
  }
}

function mapStateToProps(state, ownProps) {
  return { 
    investigation: state.manage.savedInvest,
    investTitle: state.manage.savedInvestTitle
  };
}

const styles = theme => ({
});

const reduxFormmPermissions = reduxForm({
  enableReinitialize : true
})(PermissionsForm);

export default compose(
  withRouter,
  connect(mapStateToProps, {patchPermissionsAction}),
  withStyles(styles)
)(reduxFormmPermissions);

compose(
    withRouter,
    connect(mapStateToProps, {patchPermissionsAction}),
    reduxForm({ enableReinitialize: true }),
    withStyles(styles)
)(PermissionsForm);