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

错过了这个里面的地图功能。由于你正在使用地图，所以＆＃34;这个＆＃34;属于地图功能。您需要在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

获取它

将Redux Action传递给具有props

2 个答案: