javascript - Passing a Redux Action to a child component with props - Stack Overflow

admin管理员组

文章数量:1432205

I am trying to set a video in my app as "Featured" when a user clicks on an item. I have an action creator that does a simple console.log() when called, and for testing I call it w/ ponentDidMount(), and it works fine. I have a separate ponent for the VideoItem, and I'm trying to pass down the action creator, but I get an error: TypeError: Cannot read property 'props' of undefined. I tried to add .bind(this) to the end of the action I was passing down, but it didn't make a difference.

If the action creator works when I call it at ponentDidMount, why can't I pass it to the child ponent? Here's my Video and VideoItem ponent:

// Video.js


import React, { Component } from 'react'
import VideoItem from './VideoItem'
class Videos extends Component {
  ponentDidMount() {
      this.props.actions.getVideos()
      // This function works, but getting error
      // when passing to VideoItem ponent
      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

I am trying to set a video in my app as "Featured" when a user clicks on an item. I have an action creator that does a simple console.log() when called, and for testing I call it w/ ponentDidMount(), and it works fine. I have a separate ponent for the VideoItem, and I'm trying to pass down the action creator, but I get an error: TypeError: Cannot read property 'props' of undefined. I tried to add .bind(this) to the end of the action I was passing down, but it didn't make a difference.

If the action creator works when I call it at ponentDidMount, why can't I pass it to the child ponent? Here's my Video and VideoItem ponent:

// Video.js


import React, { Component } from 'react'
import VideoItem from './VideoItem'
class Videos extends Component {
  ponentDidMount() {
      this.props.actions.getVideos()
      // This function works, but getting error
      // when passing to VideoItem ponent
      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

• javascript
• reactjs
• redux
• flux
• reactjs-flux

Share Improve this question Follow asked Mar 27, 2016 at 20:14 MikeMike 2,70366 gold badges3232 silver badges4242 bronze badges 1

• 1 what happens if you log the props in ponentWillReceiveProps ? – noa-dev Commented Mar 27, 2016 at 20:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Missed that this inside a map function. Since you are using map, the "this" belongs to the map function. You need to assign this to a variable before the map function and use that instead.

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>
)

}

I noticed that to the VideoItem Component you have the code passing the function like so

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

But in your ponentDidMount you call this.props.actions.setFeatureVideo()

So to me you are not passing the function down as props since you are trying to get it from this.props instead of this.props.actions

本文标签： javascriptPassing a Redux Action to a child component with propsStack Overflow