將Redux Action傳遞給帶有props的子組件

Question

我想在用戶點擊某個項目時將我的應用中的視頻設置為“精選”。 我有一個動作創建者在調用時執行一個簡單的console.log（），並且為了測試我將它稱為具有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

錯過了這個里面的地圖功能。 由於您使用的是map，因此“this”屬於map函數。 您需要在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()

所以對我來說，你並沒有把這個函數作為道具傳遞下去，因為你試圖從this.props而不是this.props.actions獲取它。