如何将FormContainer组件状态传递给父组件AddProductForm？

你的问题核心出在AddProductForm中handleSubmit函数的定义逻辑——你试图从组件props里解构stateKostul，但实际上FormContainer是通过调用父组件的handleSubmit并传入自身状态作为参数，而非把状态作为props传递给AddProductForm。下面是完全不需要修改FormContainer结构的解决方案：

修正AddProductForm的handleSubmit定义 #

调整enhancer中的handleSubmit写法，让它直接接收FormContainer传递过来的表单状态参数，不再从props中解构不存在的属性：

const enhancer = compose(
  withHandlers({
    handleSubmit: () => (formData) => { // 接收FormContainer传来的state作为参数
      console.log('it works!');
      console.log(formData); // 这里就是FormContainer的完整状态了
      // 在这里执行你的服务器请求逻辑
    },
  }),
);

同时保持AddProductForm组件的结构不变，确保handleSubmit正确传递给FormContainer：

function AddProductForm({ handleSubmit }) {
  const initialValue = {
    title: '',
    location: '',
    description: '',
    photos: [],
    price: '',
  };
  return (
    <div className={s.container}>
      <h2 className={s.formTitle}>Add product</h2>
      <div className={s.formContainer}>
        <FormContainer initialValue={initialValue} handleSubmit={handleSubmit} >
          {/* 你的自定义输入组件和提交按钮 */}
        </FormContainer>
      </div>
    </div>
  );
}

为什么原来的写法不生效？ #

1. 在FormContainer的onSubmit方法中，你是这样调用父组件handleSubmit的：this.props.handleSubmit(stateKostul)——这意味着父组件的handleSubmit需要接收一个参数（也就是FormContainer的内部状态）。
2. 你原来的写法({stateKostul}) => () => {...}是在尝试从AddProductForm的props里获取stateKostul，但这个组件的props里根本没有这个属性，所以自然得到undefined。
3. 修正后的写法让handleSubmit成为一个接收表单数据的函数，正好匹配FormContainer的调用逻辑，因此能正确拿到需要的状态数据。

这个方案完全不需要改动FormContainer的结构，只调整AddProductForm中handleSubmit的定义逻辑，就能解决你的问题。

内容的提问来源于stack exchange，提问作者Vitaliy