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

Question

当用户点击某个项目时，我试图在我的应用程序中将视频设置为 "Featured"。我有一个动作创建器，它在调用时执行简单的 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

错过了地图函数中的 this。由于您使用的是地图，因此 "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>
)

}

Answer 2

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

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

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

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

获取它

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

Passing a Redux Action to a child component with props

javascript

reactjs

redux

flux

reactjs-flux