【发布时间】：2020-10-11 03:40:33
【问题描述】：
在这里反应菜鸟。我正在尝试制作一个简单的练习应用程序来帮助我学习 React，但我遇到了很多奇怪的行为。这是一个有多个待办事项列表可供选择的待办事项应用程序。我要的行为是一个待办事项列表的列表，您可以在其中选择一个和待办事项（如 wunderlist/msft 待办事项）。选择一个不同的列表，它的待办事项显示等。此时它使用静态 json，其中每个项目都有一个子数组。
useEffect - 我正在尝试使用它来加载数据。它一直抱怨缺少依赖项。当我添加它们时，它也会抱怨这一点。如果我使用空数组作为第二个参数，它会抱怨并且似乎会触发多次。
useState - 我用它来存储数据。它被初始化为一个空数组。但是 render 在 useEffect 之前触发，它说我的数据未定义，所以我的第二个列表永远不会呈现。
我在代码中有几个 console.logs，它们都被多次触发。
我确定这只是菜鸟的错误，但在这一点上我很困惑。这是我的代码：
数据/Todo.js
const TodoData = [
{
Id: 1,
Title: "Groceries",
TodoList: [
{
Id: 1,
Title: "Apples"
},
{
Id: 2,
Title: "Oranges"
},
{
Id: 3,
Title: "Bananas"
}
]
},
{
Id: 2,
Title: "Daily Tasks",
TodoList: [
{
Id: 11,
Title: "Clean Kitchen"
},
{
Id: 12,
Title: "Feed Pets"
},
{
Id: 13,
Title: "Do Stuff"
}
]
},
{
Id: 3,
Title: "Hardware Store",
TodoList: []
},
{
Id: 4,
Title: "Costco",
TodoList: [
{
Id: 21,
Title: "Diapers"
},
{
Id: 22,
Title: "Cat Food"
},
{
Id: 23,
Title: "Apples"
},
{
Id: 24,
Title: "Bananas"
}
]
},
{
Id: 5,
Title: "Work",
TodoList: [
{
Id: 34,
Title: "TPS Reports"
}
]
}
];
export default TodoData;App.Js
import React, { useEffect, useState } from "react";
import TodoData from "./data/Todo.js";
function App() {
const [todoData, setTodoData] = useState([]);
const [todoDetails, setTodoDetails] = useState([]);
useEffect(() => {
if (todoData.length === 0) {
getTodoData();
}
}, [todoData]);
const getTodoData = () => {
setTodoData(TodoData);
console.log("getting todo data");
getTodoDetails(1);
};
const getTodoDetails = id => {
const result = TodoData.filter(x => x.Id === id);
console.log(result[0]);
setTodoDetails(result[0]);
};
const handleClick = e => {
const selectedId = Number(e.target.getAttribute("data-id"));
getTodoDetails(selectedId);
};
return (
<div className="App">
<div className="container-fluid">
<div className="row">
<div className="list-group col-md-4 offset-md-1">
{todoData.map(todos => (
<button
key={todos.Id}
data-id={todos.Id}
className="btn list-group-item d-flex justify-content-between align-items-center"
onClick={handleClick}
>
{todos.Title}
<span className="badge badge-primary badge-pill">
{todos.TodoList.length}
</span>
</button>
))}
</div>
<div className="col-md-6">
<ul className="list-group">
<h2>{todoDetails.Title} List</h2>
{console.log(todoDetails.TodoList)}
{/* this fails miserably */}
{/* {todoDetails.TodoList.map(details => (
<li className="list-group-item" key={details.Id}>
{details.Title}
</li>
))} */}
<li className="list-group-item">Cras justo odio</li>
<li className="list-group-item">Dapibus ac facilisis in</li>
<li className="list-group-item">Morbi leo risus</li>
</ul>
</div>
</div>
</div>
</div>
);
}
export default App;【问题讨论】：
-
请将代码的相关部分添加到问题中。如果外部链接被删除或修改，问题将没有未来价值
标签： javascript reactjs