Question

每个人我都想构建一个待办事项应用程序。但是在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;

所以我不知道为什么我在运行项目时收到该错误警报。那么我如何能够找出问题并消除它

ReferenceError：初始化之前无法访问“ addTodo”

0 个答案: