Question

我最近学习了一些基本的Redux，并阅读了他们文档中的教程。

我有一个React表示类组件，我希望它也成为自己的容器组件，名为Word。

我希望其道具的价值来自Redux商店。我能够从商店的初始状态成功获取其道具的初始值，但是当我尝试调度动作时，其属性wordParts返回undefined。

这是Word的结构：

Word : {
  wordParts : <array>
  stem : <object> //I'm using a string for now for testing
}

这是商店的结构：

store : {
  word : {
    wordParts : <array>
    stem : <object> //I'm using a string for now for testing
  }
}

这是我希望在分派动作时要做的事情：

//is used to update Word.stem
replaceStem(stem) = currentStem => newStem 

//is used to add a some `suffix` variable as the last element of the current Word.wordParts
addSuffix(suffix) = currentWordParts => [...currentWordParts, suffix]

这是我的代码-我还有一些其他不相关的代码，我对其进行了一些更改以删除不相关的代码（例如样式），但它的行为应与本地代码相同。

https://codesandbox.io/s/rj2xlryx8m

Answer 1

您对React和Redux都有非常奇怪的结构和标记，我无法为您提供正确的语法，但是在此mapStateToProps的Word容器中，您需要返回来自Redux商店的这些道具：

return {
 whateverProps: state.whateverProps
}

，然后当您想在组件中传递这些道具时，可以使用以下命令进行访问和传递：

this.props.whateverProps

Answer 2

您需要添加的是connet语句（来自库react-redux）。导出一个名为mapStateToProps的函数。这是一个HOC，负责部分redux存储并将其传递给组件props。

Answer 3

找到解决方案+解释：

说明：该组件从类中获得了道具，因此它确实得到了正确的初始化，就像该类的实例在其构造函数中调用从商店获取的道具时一样。这些初始状态一直作为类的属性存储，当作为对象的属性访问时，返回的值与存储在类中的值相同。

解决方案：删除/不使用这些道具作为类属性，而是从render()函数中调用它们，该函数会在组件更改时被调用（在这种情况下，更改其道具由mapStateToProps触发，这是由Redux存储中的更改触发的。

Answer 4

与物体的破坏部分相混淆

addSuffix(suffix) = currentWordParts => [...currentWordParts, suffix]

因为原始对象中没有“后缀”键可替换。

React + Redux |道具返回此处未定义-为什么？

4 个答案: