显示所有主题名称字段的错误

Question

我有一个用户可以发布主题的表单。在其下方显示已发布的主题。当主题名称或类型字段之一中存在验证错误时，将显示所有名称或类型字段，其中包含所需的名称或主题。为什么会这样？ onChange事件中的验证不正常。

这是代码

这个用于验证

export const validate = values => {
  const errors = {}
  const requiredFields = {
    topic_name: 'Topic Name',
    topic_type: 'Topic Type',
  }
  for (const key in requiredFields) {
    if(requiredFields.hasOwnProperty(key)) {
      if(!values[key]) {
        errors[key] = `${requiredFields[key]} is required`
      }
    }
  }
  return errors
}

主题

class Topic extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            customTopic: [],
            visible: false,
            id: '',
            topic_name: this.props.match.params.topic || '',
            topic_type: ''
        };

        this.handleChange = this.handleChange.bind(this);
    }

    componentDidMount() {
        this.props.fetchCustomTopic();
    }

    handleChange = e => {
        this.setState({ [e.target.name]: e.target.value });
    };

    simplePlainTable = topics => (
        <DataTable plain>
            <TableHeader>
                <TableRow>
                    <TableColumn>Topic Name</TableColumn>
                    <TableColumn>Topic Type</TableColumn>
                    <TableColumn>Action</TableColumn>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow>
                    <TableColumn>
                        <Field
                            placeholder="Topic Name"
                            name="topic_name"
                            id="topic_name"
                            value={this.state.topic_name}
                            onChange={this.handleChange}
                            className="input-field"
                            type="text"
                            fullWidth
                            component={TopicNameField}
                            required
                        />
                    </TableColumn>
                    <TableColumn>
                        <Field
                            placeholder="Topic Type"
                            name="topic_type"
                            id="topic_type"
                            value={this.state.topic_type}
                            onChange={this.handleChange}
                            required
                            className="input-field"
                            type="text"
                            fullWidth
                            component={TopicTypeField}
                        />
                    </TableColumn>
                    <TableColumn>
                        <Button
                            icon
                            tooltipLabel="Add"
                            onClick={e => this.addCustomTopic(e)}>
                            add
                        </Button>
                    </TableColumn>
                </TableRow>
                {topics &&
                    topics.customTopic.map((obj, i) => (
                        <TableRow key={i} id={obj.id}>
                            <TableColumn>
                                <Field
                                    placeholder="Topic Name"
                                    name="topic_name"
                                    id="topic_name"
                                    defaultValue={obj.topic_name}
                                    onBlur={e =>
                                        this.updateCustomTopic(
                                            { topic_name: e.target.value },
                                            obj.id
                                        )
                                    }
                                    required
                                    className="input-field"
                                    type="text"
                                    fullWidth
                                    component={TopicNameField}
                                />
                            </TableColumn>
                            <TableColumn>
                                <Field
                                    placeholder="Topic Type"
                                    name="topic_type"
                                    id="topic_type"
                                    defaultValue={obj.topic_type}
                                    onBlur={e =>
                                        this.updateCustomTopic(
                                            { topic_type: e.target.value },
                                            obj.id
                                        )
                                    }
                                    required
                                    className="input-field"
                                    type="text"
                                    fullWidth
                                    component={TopicTypeField}
                                />
                            </TableColumn>
                            <TableColumn>
                                <Button
                                    icon
                                    tooltipLabel="Delete"
                                    onClick={() => this.show(obj.id)}>
                                    delete
                                </Button>
                            </TableColumn>
                        </TableRow>
                    ))}
            </TableBody>
        </DataTable>
    );

    render() {
        const { topics } = this.props;
        return (
            <div className="container">
                    {this.simplePlainTable(topics)}
                    {this.dialogContainer()}
            </div>
        );
    }
}

export default reduxForm({
    form: 'wizard',
    validate
})(connect(mapStateToProps, mapDispatchToProps)(Topic));

我正在使用redux表单。

这就是发生的事情

Answer 1

您所看到的是因为两个主题实例在技术上都是相同的“形式”。当您致电reduxForm()时，您会传入表单名称（wizard）。这充当表单的“标识符”，表单的数据使用此标识符存储在redux中。换句话说，当您渲染组件的两个实例时，两个实例在redux中共享相同的表单状态。

解决这个问题的方法实际上取决于您的业务需求。您是否同时渲染多个主题？如果是这样，那么您可能希望查看FieldArray或FormSection。如果没有，那么第一个Topic表单中的状态可能只是在显示第二个Topic表单之前没有被销毁。