TypeError:_this2.props.videoAdded不是函数

时间:2019-02-22 14:41:55

标签: javascript html reactjs redux react-redux

我的问题是有关函数videoAdded给我的错误。

import React, { Component } from 'react'
import AddIcon from "../../Svgs/Add.svg";
import './Add.css';

class AddVideo extends Component {
     state = {
        name: '',
        url: ''
    }

    nameChangedHandler = (event) => {
        this.setState({name: event.target.value});
    }

    urlChangedHandler = (event) => {
        this.setState({url: event.target.value});
    }

    render () {
        return (
            <div className="addContainer">
                <input 
                    type="text" 
                    placeholder="Name" 
                    onChange={this.nameChangedHandler}
                    value={this.state.name} />
                <input 
                    type="text" 
                    placeholder="url"
                    onChange={this.urlChangedHandler}
                    value={this.state.url} />
                <button className="addButton" onClick={() => this.props.videoAdded(this.state.name, this.state.url)}>
                    <img src = {AddIcon} />
                </button>
            </div>
        );
    }
}
export default AddVideo;

我在videoAdded上出错

import React, { Component } from 'react';
import { connect } from 'react-redux';
import "./Videos.css";

import Video from "./Video/Video";
import AddVideo from '../Add/Add';
import * as actionTypes from '../../store/actions';


class Videos extends React.Component {
    render () {
        return (
            <div>
                <AddVideo videoAdded={this.props.onAddedVideo} />
                {this.props.vid.map(video => (
                    <Video 
                        key={video.id}
                        name={video.name} 
                        src={video.url} 
                        clicked={() => this.props.onRemovedVideo(video.id)}/>
                ))}
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        vid: state.videos
    };
};
const mapDispatchToProps = dispatch => {
    return {
        onAddedVideo: (name, url) => dispatch({type: actionTypes.ADD_VIDEO, videoData: {name: name, url: url}}),
        onRemovedVideo: (id) => dispatch({type: actionTypes.REMOVE_VIDEO, videoId: id})
    }
};


export default connect(mapStateToProps, mapDispatchToProps)(Videos);

我将不胜感激。

0 个答案:

没有答案