Как отправить данные в хранилище данных из функционального компонента?

Question

Вот мой компонент модальной формы

    import { addItem } from "../actions/itemActions";


const Example = ({ visible, onCreate, onCancel }) => {
  const [form] = Form.useForm();
  return (
    <Modal
      visible={visible}
      title="Create a new collection"
      okText="Create"
      cancelText="Cancel"
      onCancel={onCancel}
      onOk={() => {
        form
          .then(values => {
            form.resetFields();
            onCreate(values);
          })
          .catch(info => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          modifier: 'public',
        }}
      >
        <Form.Item
          name="name"
          label="Item Name"
          rules={[
            {
              required: true,
              message: 'Please enter the name!',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="count"
          label="Item count"
          rules={[
            {
              required: true,
              message: 'Please enter the number of items!',
            },
          ]}
        >
          <InputNumber style={{minWidth: '200px'}} />
        </Form.Item>
        <Form.Item
          name="initialValue"
          label="Item value"
          rules={[
            {
              required: true,
              message: 'Please enter the initialValue!',
            },
          ]}
        >
          <InputNumber style={{minWidth: '200px'}}  />
        </Form.Item>

      </Form>
    </Modal>
  );
};

Вот компонент страницы коллекции, который будет отображать модальный при нажатии кнопки

const CollectionsPage = () => {
  const [visible, setVisible] = useState(false);
  const [name, setName] = useState(null)
  const [count, setCount] = useState(null)
  const [initialValue, setInitialValue] = useState(null)

  const onCreate = values => {
    console.log(values)
  };


  return (
    <div>
      <Button
        type="primary"
        onClick={() => {
          setVisible(true);
        }}
      >
        New Collection
      </Button>
      <Example
        visible={visible}
        onCreate={onCreate}
        onCancel={() => {
          setVisible(false);
        }}
      />
    </div>
  );
};



const mapStateToProps = (state) => ({
  item: state.item,
});

export default connect(mapStateToProps, { addItem })(CollectionsPage);

Что я хочу сделать, я хочу установить этапы [name, count и initialValue] внутри функции onCreate. Я новичок в компоненте функции, поэтому я не знаю, как установить несколько состояний одновременно. Я пробовал много способов из Google, но я всегда ошибаюсь.

После установки состояния я хочу создать новый элемент вроде этого и экспортировать его в redux

() => {
        const newItem = {
          id: this.state.id,
          name: this.state.name,
          count: this.state.count,
          key: this.state.id,
          initialValue: this.state.initialValue,
        };
        this.props.addItem(newItem);
      }

Answer 1

Так как состояния связаны в вашем коде, вы можете использовать ловушку useState для удержания объекта и вызова addItem из реквизита для обновления состояния избыточности

const CollectionsPage = (props) => {
  const [visible, setVisible] = useState(false);
  const [item, setItem] = useState({})

  const onCreate = values => {
    console.log(values)
    const item = {
          id: values.id,
          name: values.name,
          count: values.count,
          key: values.id,
          initialValue: values.initialValue,
    };
    setItem(item);
    props.addItem(item);
  };
  ...

}