javascript - ownProps 缺少通过 mapStateToProps 添加的 Prop

Question

我有以下表格:

let NoteForm = ({handleSave}) => {
  return (
    <form onSubmit={handleSave}>
      <Field component="input" type="text" name="body" />
      <button type="submit">Submit</button>
    </form>
  )
}

和:

const mapStateToProps = (state, ownProps) => {
  return {
    isNew: state.isNew
  }
}

最后:

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    handleSave: () => {
      dispatch(saveNote(ownProps)) // ownProps does not contain "isNew" prop
    }
  }
}

Prop isNew不包含在 ownProps 中.我希望这是我在这里犯的明显错误，但看不到它。

呈现 NoteForm 的组件是Note并有条件地渲染它:

{ (isNew || isEdit) && <NoteForm /> }

我当然可以将 Prop 作为属性传递进来，但在这一点上我很固执，因为我无法理解为什么我的 Prop 丢失了。我已经尝试将它作为参数传递给我的组件:{handleSave, isNew}但这也不起作用。

作为引用，我的连接是:

NoteForm = connect(
  mapStateToProps,
  mapDispatchToProps
)(NoteForm);

Answer 1

目前我无法对此进行测试，但是 ownProps 是传递给由 connect(...)(YourComponent) 返回的组件的属性，这是有道理的。另一方面，isNew 由 mapStateToProps 直接传递给 YourComponent，因此您无法在 mapDispatchToProps< 中访问它 回调。

在你的应用中的某个地方......

const ReturnedComponent = connect(...)(YourComponent)

render () {

  <ReturnedComponent {...ownProps} />
}

这些 ownProps 可由 mapStateToProps 访问，但不能由 mapDispatchToProps 访问。

---

查看问题的可能解决方案 here由 redux 的创建者本人推荐。