показывает ошибку во всех полях названия темы

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));

Я использую избыточную форму.

это то, что происходит

Answer 1

То, что вы видите, происходит потому, что оба экземпляра Темы, технически, имеют одну и ту же «форму».Когда вы звоните reduxForm(), вы передаете имя формы (wizard).Это действует как «идентификатор» формы, и данные формы сохраняются в избыточном количестве с использованием этого идентификатора.Другими словами, когда у вас есть два экземпляра визуализируемого компонента, оба экземпляра совместно используют одно и то же точное состояние формы в приставке.

Способ решения этой проблемы действительно зависит от требований вашего бизнеса.Вы рендеринг нескольких тем одновременно?Если это так, то вы, вероятно, захотите взглянуть на FieldArray или FormSection .Если нет, то состояние из вашей первой формы Темы, вероятно, просто не уничтожается до отображения второй формы Темы.