reactjs - 为什么 props 没有注入到组件中？

Question

在这里反应/redux 新手。尝试构建一个待办事项应用程序并拥有一个像这样的容器组件：

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import Input from '../components/InputText'
import addTodo from '../actions/addTodoAction'

export class InputText extends Component {
  static propTypes = {
    prop: PropTypes
  }
}

export default connect(null, {addTodo})(Input)

“无状态”组件 Input 如下所示：

import React from 'react'
import PropTypes from 'prop-types'

const InputText = ({addTodo}) => {
    return (
        <div>
            <input type='text'></input>
            <button onClick={this.props.addTodo}>add todo</button>
        </div>
    )
}

//question :define proptype for action?
InputText.propTypes = {
    addTodo: PropTypes.func.isRequired
}

export default InputText

这是动作创建者：

const addTodo = (param) => ({
  type: 'ADD_TODO',
  payload: param.text
})

export default addTodo;

当我运行该应用程序时，我收到此错误：

TypeError：无法读取未定义的属性“addTodo”

所以看起来道具没有传入。我做错了什么？链接到 githubrepo

标签： reactjsreact-redux

Answer 1

您不必使用 this.props.addTodo，只需简单地使用它即可<button onClick={addTodo}>add todo</button>。

你已经addTodo通过解构道具直接采取了。