每个人我都想构建一个待办事项应用程序。但是在index.js中添加一些新代码后,我得到了referenceError。这是我的TodoAddForm.js中的代码
import { connect } from 'react-redux';
import { addTodo } from '../actions/index.js';
class TodoAddForm extends Component {
constructor(props) {
super(props);
this.state = { value: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
handleSubmit(event) {
const todo = this.state.value.trim();
event.preventDefault();
if (!todo) return;
this.setState({ value: '' });
this.props.addTodo(todo);
}
render() {
return (
<form className="TodoAddForm" onSubmit={ this.handleSubmit } >
<input placeholder="What need's to be done?"
type="text"
value={ this.state.value }
onChange={ this.handleChange }
/>
</form>
);
}
}
export default connect(null, { addTodo })(TodoAddForm);
**下面,我要分享另一个代码。这主要是index.js文件。在添加一些行之前,每件事都运行良好。请检查我的代码**
export const ADD_TODO = 'ADD_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';
export const DELETE_TODO = 'DELETE_TODO';
export const SET_FILTER = "SET_FILTER";
export const addTodo = (value) => ({
type: ADD_TODO,
payload: { value }
});
export const toggleTodo = (id) => ({
type: TOGGLE_TODO,
payload: { id }
});
export const deleteTodo = (id) => ({
type: DELETE_TODO,
payload: { id }
});
export const setFilter = filter => ({
type: 'SET_FILTER',
filter,
});
export const TodoList = ({list, onTodoClick, filter}) => { **problems started from here**
let filteredList = [];
if (filter === 'all') {
filteredList = list;
} else if (filter === 'active') {
filteredList = list.filter(todo => !todo.completed);
} else if (filter === 'completed') {
filteredList = list.filter(todo => todo.completed);
}
return (
<ul>
{filteredList.map(todo => {
return (
<TodoItem key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} />
);
})}
</ul>
);
};
export default TodoList;
所以我不知道为什么我在运行项目时收到该错误警报。那么我如何能够找出问题并消除它