Question

在我简单的打字稿/反应式应用程序中，当我尝试映射对象数组时，遇到一个错误，即类型“ object”上不存在属性“ title”。

const Todo = () => {
  const [todos, setTodos] = useState<object[]>([])
  const [title, setTitle] = useState<string>('')
  const [body, setBody] = useState<string>('')

  const onSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
    e.preventDefault()

    const todo = {
      title: title,
      body: body
    }

    setTodos([todo, ...todos])
    setTitle('')
    setBody('')
  }
  return (
    <>
      <form onSubmit={onSubmit}>
        <input value={title} onChange={e => setTitle(e.target.value)} />
        <input value={body} onChange={e => setBody(e.target.value)} />
        <button>submit</button>
      </form>
      todos:
      {todos.map((todo) => <div><h3>{todo.title}</h3>
        <p>{todo.body}</p></div>)}
    </>
  );
}

Answer 1

失败是因为您说todos是object[]，但是object类型没有与之关联的属性。如果将其更改为下面的示例，它应该可以工作。

const [todos, setTodos] = useState<{title: string, body: string}[]>([])

使用Typescript映射对象数组

1 个答案: