ReactJS: Попытка получить значения внутри массива внутри состояния

Question

Итак, я использую antd для обработки компонента Form, который имеет начальное состояние, подобное этому:

...constructor
...super
state = { 
  tags: ["tag"]
}

handleSubmit = e => {
  e.preventDefault();
  console.log(this.state);
  // gives me Object { tags: [] }
}

render() {
  return <Form onSubmit={this.handleSubmit} />
}

Это буквально так ... но я понятия не имею, почему я продолжаю получать пустой массивв консоли. Может быть, это невозможно выяснить с таким большим количеством информации, но именно поэтому это сводит меня с ума. Я заметил, что если я закомментирую некоторый код в этом классе, он внезапно начнет показывать значения массива ... не знаю.

Любая помощь будет принята.

КогдаЯ вхожу в React Devtools, он показывает «тег» в моем массиве тегов. Но когда я нажимаю на кнопку submit, он очищает массив. Я предполагаю, что это как-то связано, но я не уверен, почему состояние очищает только массив тегов, а не другие значения состояния. Что-то связанное с глубоким клоном ...?

Answer 1

Для установки значений по умолчанию в форме проектирования муравья и после проверки необходимо выполнить следующие шаги:

1. Форма переноса:

class YouComponent extends Component { //..... }

const WrappedComponent = Form.create({ name: 'you_form' })(YouComponent);

export default WrappedComponent;

Для установки значений по умолчанию:

в вашем случае, я думаю, вы можете использовать компонент Select для tags

 <Form layout="inline" onSubmit={this.handleSubmit}>
    <Form.Item>
      {getFieldDecorator("tags", {
        rules: [{ required: true, message: "Pleases select tag!" }]
      })(
        <Select
          mode="multiple"
          style={{ width: "100%" }}
          placeholder="Please select"
          // here setup default selected of tags
          defaultValue={this.state.tags}
        >
          {// map here tags <Select.Option>}
        </Select>
      )}
    </Form.Item>
  </Form>

Выбрать Документация

Чтобы проверить и получить значение из формы:

handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
      }
    });
  };