如何从功能组件向 redux 存储发送数据？

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

这是collectionpage组件，单击按钮时将显示模式

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

我想要做的是我想在 onCreate function 中设置 [name, count 和 initialValue] 的阶段。 我是 function 组件的新手，所以我不知道如何一次设置多个状态。 我从谷歌尝试了很多方法，但我总是错的。

设置 state 后，我想创建一个这样的新项目并将其导出到 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 挂钩来保存 object 并从道具调用addItem以更新 redux state

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

}