我正在 React 中開始我的 TypeScript 之旅并嘗試我學到的東西，我嘗試了一個簡單的 Todo 應用程式。除了一件事外，一切都很好！
當我按下“newTask”時，當我將滑鼠懸停在“newTask”上時，這是提示（來自法語的 Google Trad）：
'Todo | undefined '不歸因于'Todo'型別的引數。無法將型別 'undefined' 分配給型別 'Todo'。
我想這與這里的某些事情有關：
let [newTask, setNewTask] = useState<Todo>();
因為如果我輸入useState<any>();我沒有任何錯誤..
這是完整的代碼：
import React, { useState } from "react";
// INTERFACES
interface Todo {
id: number;
text: string;
completed: boolean;
}
export const TodoComponent = () => {
// STATE
const initialTodos: Todo[] = [
{ id: 0, text: "Todo 1", completed: false },
{ id: 1, text: "Todo 2", completed: true },
{ id: 2, text: "Todo 3", completed: false },
];
const [todos, setTodos] = useState<Todo[]>(initialTodos);
let [newTask, setNewTask] = useState<Todo>();
// ACTIONS
const handleClickOnComplete = (id: number, completed: boolean) => {
const newTodos = [...todos];
newTodos[id].completed = !completed;
setTodos(newTodos);
};
const handleRemove = (todo: Todo) => {
const newTodos = todos.filter((t) => t !== todo);
setTodos(newTodos);
};
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setNewTask({
id: todos.length,
text: event.target.value,
completed: false,
});
};
const handleSubmitNewTodo = () => {
const newTodos = [...todos];
console.log(newTask, newTodos);
newTodos.push(newTask);
setTodos(newTodos);
};
return (
<div>
<h1>Todo App !</h1>
<div>
{todos.map((todo) => {
return (
<div key={todo.id}>
{todo.id} - {todo.text} -{" "}
<input
type="checkbox"
checked={todo.completed}
onChange={() => handleClickOnComplete(todo.id, todo.completed)}
/>
<button onClick={() => handleRemove(todo)}>Remove task</button>
</div>
);
})}
</div>
<hr />
<div>
<input placeholder="Add todo" type="text" onChange={handleChange} />
<button onClick={handleSubmitNewTodo}>Add todo</button>
</div>
</div>
);
};
問題出在 handleSubmitTodo
感謝您的幫助和建議。小心。
uj5u.com熱心網友回復：
更新
你可以試試這個：
const handleSubmitNewTodo = () => {
let newTodos = [...todos];
console.log(newTask, newTodos);
if (newTask) {
newTodos.push(newTask);
setTodos(newTodos);
setNewTask(undefined);
}
};在將新的待辦事項添加到待辦事項串列后，我已將 setNewTask 添加到 undefined 以保持初始狀態。
uj5u.com熱心網友回復：
在推送周圍添加條件似乎可以解決問題。
const handleSubmitNewTodo = () => {
const newTodos = [...todos];
if (newTask) {
newTodos.push(newTask);
}
setTodos(newTodos);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/369616.html
標籤：javascript 反应 打字稿