道具不会传递给子组件 - redux-form/react

Question

我的道具没有传递给子组件。我有以下父组件NewProject：

...

export class NewProject extends React.PureComponent {

  constructor(props) {
    super(props);
    this.saveProject = this.saveProject.bind(this);
  }

  saveProject = (values) => {
    console.log(values);
  }

  render() {
    return (
      <div>
        <div style={{fontSize: 14}} className="container">
          <NewProjectForm
            onSubmit={this.saveProject}
          />
        </div>
      </div>
    );
  }
}
...

以及子组件NewProjectForm

...
const NewProjectForm = (props) => {
  const {
    handleSubmit,
    pristine,
    reset,
    submitting,
    locale
  } = props;

  console.log(props);

  return (
      <form onSubmit={handleSubmit}>
            <RaisedButton labelColor='#ffffff' type="submit" backgroundColor='#86BFC4' label="Save" />
      </form>
    </Form>
  )
}

export default reduxForm({
  form: 'newProjectForm'
})(NewProjectForm);

当我按下提交按钮时，我收到以下错误：

Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop
    at checkSubmit (eval at ./node_modules/redux-form/lib/reduxForm.js (http://localhost:3000/main.js:5694:1), <anonymous>:133:11)
    at Form.submit (eval at ./node_modules/redux-form/lib/reduxForm.js (http://localhost:3000/main.js:5694:1), <anonymous>:540:74)
    at Object.ReactErrorUtils.invokeGuardedCallback (webpack:///./~/react-dom/lib/ReactErrorUtils.js?:70:16)

发生错误是因为没有传递道具，但为什么会这样 - 我错过了什么？

这是 console.log 的输出...

Answer 1

你用 props 发送 onSubmit 并尝试使用 handleSubmit

  const {
    handleSubmit, // change to onSubmit
    pristine,
    reset,
    submitting,
    locale
  } = props;

Answer 2

这是一个名称不匹配的问题：

<NewProjectForm
    onSubmit={this.saveProject}
/>

您将其传递为onSubmit 并将其用作handleSubmit：

const {
    handleSubmit, // change this to onSubmit
    pristine,
    reset,
    submitting,
    locale
  } = props;