我的问题是有关函数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);
我将不胜感激。