Question

我正在尝试创建一个简单的待办事项列表应用程序，您可以在其中输入名称和任务到两个输入中，并在点击添加任务按钮后创建任务列表。我已经调试了好几个小时，无法弄清为什么未检测到taskAdded！我从udemy课程中获得了与该代码非常相似的其他代码，效果很好，但我不确定为什么它不能正常运行。这是我项目中的几段代码。会有什么帮助！：）

AddTask.js

import React, { Component } from "react";

class AddTask extends Component {
  state = {
    name: "",
    task: ""
  };

  nameChanged = event => {
    this.setState({ name: event.target.value });
  };
  taskChanged = event => {
    this.setState({ task: event.target.value });
  };
  render() {
    return (
      <div className="AddTask">
        <input
          type="text"
          placeholder="Name"
          onChange={this.nameChanged}
          value={this.state.name}
        />
        <input
          type="text"
          placeholder="Task"
          onChange={this.taskChanged}
          value={this.state.task}
        />
        <button onClick={() => this.props.taskAdded(this.state.name, this.state.task)}>Add Task</button>
      </div>
    );
  }
}

export default AddTask;

Tasks.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

import Task from '../components/Task/Task';
import AddTask from '../components/AddTask/AddTask';
import * as actionTypes from '../store/actions';

class Tasks extends Component {

    render () {
        return (
            <div>
                <AddTask taskAdded={this.props.onAddedtask} />
                {this.props.tsk.map(task => (
                    <Task
                        key={task.id}
                        name={task.name} 
                        task={task.task} 
                        clicked={() => this.props.onRemovedTask(task.id)}/>
                ))}
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        tsk: state.tasks
    };
};

const mapDispatchToProps = dispatch => {
    return {
        onAddedTask: (name, task) => dispatch({type: actionTypes.ADD_TASK, taskData: {name:name, task: task}}),
        onRemovedTask: (id) => dispatch({type: actionTypes.REMOVE_TASK, taskId: id})
    }
};

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

Answer 1

您有错字。 onAddedTask需要大写字母T in

<AddTask taskAdded={this.props.onAddedtask}

TypeError：_this2.props.taskAdded不是函数redux

1 个答案: