我正在制作一個簡單的待辦事項串列應用程式來將我正在學習的內容付諸實踐，并且我正在使用 Typescript 進行操作。從字面上看，半小時前應用程式運行良好，但現在“突然間”（當然我觸摸了我不應該觸摸的東西，我沒有意識到是什么）我不能在我的狀態變數上應用 .map()我存盤用戶任務的地方，因為理論上它是一個物件。
我創建狀態并將其定義為陣列的組件的代碼：
import React, { useState, useEffect } from 'react'
import InputForm from '../InputForm/InputForm'
import ItemsContainer from './ItemsContainer'
export default function Container() {
const [userTasks, setUserTasks] = useState(
new Array<{ id: string; name: string; completed: boolean }>()
)
// This function is received by <InputForm /> and it returns the new Task.
// Updates the current tasks (userTasks state) with the new { task } received.
const addTaskHandler = (task: any) => {
setUserTasks(task)
}
useEffect(() => {
setUserTasks(JSON.parse(window.localStorage.getItem('Task') || '{}'))
}, [])
useEffect(() => {
window.localStorage.setItem('Task', JSON.stringify(userTasks))
}, [userTasks])
return (
<div className="flex flex-col px-4 container mx-auto sm:max-w-screen-sm">
{console.log(Array.isArray(userTasks(}
<InputForm onAddTask={addTaskHandler} />
<ItemsContainer tasks={userTasks} />
</div>
)
}
我執行 .map() 的組件代碼：
import React from 'react'
import Items from '../Items/Items'
interface Props {
tasks: Array<{
id: string
name: string
completed: boolean
}>
}
const ItemsContainer: React.FC<Props> = ({tasks}) => {
return (
<ul className='h-96 overflow-auto flex flex-col items-center scrollbar-hide'>
{tasks.map((task) => (
<Items name={task.name} key={task.id} />
))}
</ul>
)
}
export default ItemsContainer
我很確定這個錯誤的主要原因一定是讓我盲目地使用 Typescript，但我想知道這個錯誤。
非常感謝您！
uj5u.com熱心網友回復：
這是any使用 TypeScript 時應避免使用的原因之一。正確鍵入內容，您將能夠在編譯期間而不是在運行時看到問題。如果你使用any，你就違背了使用 TypeScript 的目的。
和
const addTaskHandler = (task: any) => {
setUserTasks(task)
}
聽起來像是task某種奇異元素-在這種情況下，呼叫
setUserTasks(task)
然后將狀態設定為該單個任務- 而不是陣列（這意味著呼叫.map它將失敗）。
找出任務的型別 - 看起來可能是
{ id: string; name: string; completed: boolean }
并按原樣鍵入引數，然后將該元素附加到處理程式中的陣列中。
type Task = { id: string; name: string; completed: boolean };
const [userTasks, setUserTasks] = useState<Task[]>([]);
const addTaskHandler = (task: Task) => {
setUserTasks([...userTasks, task]);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/442540.html
標籤：javascript 反应 打字稿