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

道具isNew未包含在ownProps中。我希望这是我在这里犯下的一个明显错误，无法看到它。

呈现NoteForm的组件为Note并按条件呈现：

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

我当然可以将道具作为属性传递，但此时我很顽固，因为我无法理解为什么我的道具丢失了。我已经尝试将其作为参数传递给我的组件：{handleSave, isNew}但这也不起作用。

作为参考，我的连接是：

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

Answer 1

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

你应用中的某处...

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

render () {

  <ReturnedComponent {...ownProps} />
}

这些ownProps可由mapStateToProps访问，但不能由mapDispatchToProps传递。{/ p>

查看redux自己创建者推荐的问题here的可能解决方案。

ownProps缺少通过mapStateToProps

1 个答案: