reactjs - 类型“”不可分配给类型“IntrinsicAttributes &”。类型“IntrinsicAttributes &”上不存在属性“”

Question

我是使用 React/Redux/Typescript 进行前端开发的新手。

我正在构建一个 Todo 应用程序。我有以下错误：

输入'{待办事项：待办事项；}' 不可分配给类型 'IntrinsicAttributes & Todo'。类型“IntrinsicAttributes & Todo”上不存在属性“todo”。TS2322

我已经尝试在线搜索，但我不知道为什么。

我的代码：

import React, { useState } from 'react';
import { connect } from 'react-redux'
import { addTodo} from './index'

function AddToDo() {
  const [input, setInput] = useState('')

  function handleInput(e: React.ChangeEvent<HTMLInputElement>) {
    setInput(e.target.value)
  }

  //dispatch to store
  function handleAddTodo() {
    addTodo(input)
    setInput('')
  }

  return (
    <div>
      <input type="text" onChange={(e) => handleInput(e)}/>
      <button type="button" onClick={handleAddTodo}>
        Add todo
      </button>
    </div>
)
}

//connect
connect(null, { addTodo })(AddToDo)

//TodoList
interface Todo {
  id: number
  text: string
}

interface TodoState {
  todos: Todo[]
}

function TodoList(todos: Todo[]) {

  return (
    <ul className="todo-list">
      {todos.map((todo: Todo, index) => {
        //??
        return <Todo todo={todo} />;
        })
       }
    </ul>
  )
}

function mapStateToProps(state:TodoState) {
 // const { todos } = state
  return { TodoList}
}

connect(mapStateToProps)(TodoList)

//Todo
function Todo( todo:Todo ) {

  return (
    <li>
      {todo}
    </li>
  )
}

connect()(Todo)

function App() {
  return (
    <div className="App">
      <AddToDo />
      <TodoList />
      </div>
  );
}

export default App;

标签： reactjstypescriptredux