使用 props 将 Redux Action 传递给子组件

Question

当用户点击某个项目时，我正在尝试将我的应用中的视频设置为“精选”。我有一个动作创建器，它在调用时执行一个简单的 console.log()，为了测试，我将它称为 w/componentDidMount()，它工作正常。我有一个用于 VideoItem 的单独组件，我正在尝试传递动作创建者，但我收到一个错误：TypeError: Cannot read property 'props' of undefined。我尝试将.bind(this) 添加到我传递的操作的末尾，但没有任何作用。

如果我在componentDidMount 调用它时动作创建器有效，为什么我不能将它传递给子组件？这是我的 Video 和 VideoItem 组件：

// Video.js


import React, { Component } from 'react'
import VideoItem from './VideoItem'
class Videos extends Component {
  componentDidMount() {
      this.props.actions.getVideos()
      // This function works, but getting error
      // when passing to VideoItem component
      this.props.actions.setFeaturedVideo()
  }
  constructor(props) {
      super(props);
  }
  render() {
    if(this.props.videos.length == 0){
      return <p>Loading....</p>
    }
    return (
        <div className="container">
          <ul className="row">
              {this.props.videos.map(function(result) {
                return (
                    <VideoItem
                    key={result.position}
                    setFeaturedVideo={this.props.setFeaturedVideo}
                    video={result}

                    />
                )
              })}
          </ul>
        </div>
    )
  }
}

export default Videos


// VideoItem.js

import React, { Component } from 'react'
class VideoItem extends Component {
  constructor(props) {
      super(props);
  }
  render() {
    return (
      <li className="col m6" onClick={this.props.setFeaturedVideo()}>
          {this.props.video.title}
      </li>

    )
  }
}
export default VideoItem

Answer 1

我注意到对于 VideoItem 组件，您的代码像这样传递函数

<VideoItem
  key={result.position}
  setFeaturedVideo={this.props.setFeaturedVideo}
  video={result}
/>

但是在你的componentDidMount 中你调用this.props.actions.setFeatureVideo()

所以对我来说，你没有将函数作为道具传递，因为你试图从 this.props 而不是 this.props.actions 获取它

Answer 2

在地图函数中错过了这个。由于您使用的是地图，因此“this”属于地图功能。您需要在 map 函数之前将其分配给一个变量并使用它。

render() {
    var _that = this;
    if(this.props.videos.length == 0){
      return <p>Loading....</p>
    }
return (
    <div className="container">
      <ul className="row">
          {this.props.videos.map(function(result) {
            return (
                <VideoIte
                key={result.position}
                setFeaturedVideo={_that.props.actions.setFeaturedVideo}
                video={result}

                />
            )
          })}
      </ul>
    </div>
)

}