我嘗試呼叫 {todo.text} 但出現錯誤“無法讀取未定義的屬性（讀取'文本'）”，我該怎么辦？這是我在 TodoItem.js 的代碼
import React from "react"
const TodoItem = ({todo}) => {
return(
<div className="todo-item">
<div>{todo.text}</div>
<button type="button" className="todo-btn primary">toggle</button>
</div>
)
}
export default TodoItem;
這是我來自 App.js 的代碼
import './App.css';
import React, {useState} from "react";
import TodoList from "./components/TodoItem";
import TodoForm from "./components/TodoForm";
function App() {
const [todos, setTodos] = useState([
{text: "Buy Food", isCompleted: false},
{text: "Learn React", isCompleted: false},
{text: "Build todo app", isCompleted: false}
]);
const addTodo = (value) => {
const newTodos = [...todos, {text: value}];
setTodos(newTodos)
}
return (
<div className="app">
<TodoList todos={todos}/>
<TodoForm addTodo={addTodo}/>
</div>
);
}
export default App;
uj5u.com熱心網友回復：
你傳遞了錯誤的道具更改todo為todos
<TodoList todos={todos}/>
const TodoItem = ({todos}) => {
uj5u.com熱心網友回復：
import React from "react"
const TodoItem = ({todo}) => {
console.log(todo)
return(
<div className="todo-item">
<div>{todo.text}</div>
<button type="button" className="todo-btn primary">toggle</button>
</div>
)
}
export default TodoItem
import React, {useState} from "react";
import TodoList from './components/TodoItem';
import TodoForm from "./components/TodoForm";
import './App.css';
function App() {
const [todos, setTodos] = useState([
{text: "Buy Food", isCompleted: false},
{text: "Learn React", isCompleted: false},
{text: "Build todo app", isCompleted: false}
]);
const addTodo = (value) => {
const newTodos = [...todos, {text: value}];
setTodos(newTodos)
}
console.log(todos)
return (
<div className="app">
<TodoList todo={todos}/>
<TodoForm addTodo={addTodo}/>
</div>
);
}
export default App;
uj5u.com熱心網友回復：
以下是錯誤：
- 你傳遞了錯誤的道具，所以你應該改變 =>
const TodoItem = ({todos})或<TodoList todo={todos}/> - 資料型別是一個陣列，所以你必須在呼叫它之前映射資料，你可以使用javascript中的方法，例如：使用map()方法，
{todos.map((todo) => (<TodoItem key{todo.id} todo={todo}/>))}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/494252.html
標籤：javascript 反应
上一篇：阿姆斯特朗數