我正在嘗試呈現嵌套在專案物件中的任務，并且我有一個專案物件串列。我需要使用什么方法以及我缺少什么。
- 我正在做的是遍歷每個專案并執行與其關聯的任務并過濾掉分配給User1 的任務并將它們列印為輸出。
- 但我不知道我的它不是渲染。
const App= props => {
const projects = [
{
"id": "1JEM8ivAlH073ngLtc3V",
"team": "Engineering",
"priority": "Highest",
"tasks": [
{
"description": "Hello World",
"status": "Open",
"assigine": "User1",
"priority": "Low",
"name": "Friend"
}
],
"visibility": "Public",
"name": "Radiance",
"Owner": "DVcjkvnCuV59RpxxrSbnxHK9rAgfaVriXK3NX51eiv3i",
"description": "ABCDEFGHIJ"
},
{
"id": "dHMVewmo7HYfUSgqDwhH",
"team": "Engineering",
"tasks": [
{
"name": "Implement adapter ",
"status": "Open",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\n",
"priority": "Highest",
"assigine": "User1"
},
{
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\n",
"priority": "Medium",
"name": "Replace old text with new text",
"status": "Doing",
"assigine": "User2"
},
{
"priority": "Highest",
"description": "Loreum ipsum de djdasjknkajcnkjcnskax",
"assigine": "User1",
"name": "SOL Mail",
"status": "Open"
}
],
"description": "ABCDEFGHIJ",
"Owner": "DVcjkvnCuV59RpxxrSbnxHK9rAgfaVriXK3NX51eiv3i",
"visibility": "Public",
"name": "Friend",
"priority": "Highest"
},
{
"id": "2Ld5Afb5Q9TNtqsNRfmc",
"priority": "Highest",
"description": "The react-router-dom package contains bindings for using React Router in web applications. Please see the Getting Started guide for more information on how to get started with React Router.",
"name": "Developers DAO",
"tasks": [
{
"name": "Fix Deprecated libraries",
"status": "Open",
"assigine": "User1",
"description": "Implement Dashboard ",
"priority": "Highest"
},
{
"description": "Fix Deprecated libraries",
"name": "Dikiri Dikiri",
"priority": "Highest",
"assigine": "User2",
"status": "Open",
"visibility": "Doing"
},
{
"status": "Open",
"assigine": "User2",
"description": "Change Authentication Mode",
"priority": "Highest",
"name": "SOL Mail"
},
{
"priority": "Highest",
"assigine": "User1",
"status": "Open",
"description": "Modification of User Interface",
"name": "Hello World"
},
{
"priority": "Medium",
"name": "Hello Bussy",
"description": "React routes modification",
"assigine": "User3",
"status": "Doing"
},
{
"status": "Open",
"assigine": "User2",
"priority": "Highest",
"name": "Friend",
"description": "Hello World"
}
],
"visibility": "Private",
"Owner": "DVcjkvnCuV59RpxxrSbnxHK9rAgfaVriXK3NX51eiv3i",
"team": "Engineering"
}
];
return <div>
<h1>Hello World</h1>
{
projects.forEach(function (project) {
const tasks = project.tasks.filter(task => task.assigine === "User1");
console.log("tasks was here ",tasks);
tasks.map((row) => {
console.log("row is here ",row);
return <div>
<p>{row.name}</p>
<p>{row.description}</p>
</div>
})
})
}
</div>
}
ReactDOM.render(
<App/>,
document.body
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>uj5u.com熱心網友回復：
主要問題是：
forEach總是回傳undefined。- 你沒有使用 map 在任何地方創建的陣列，所以它會被扔掉。
如果您需要任務串列，則需要從專案串列中提取它。這樣做的簡單方法是創建一個空白陣列并添加匹配任務。或者，您可以將專案陣列映射到匹配任務陣列（對于沒有匹配任務的專案，該陣列可能為空），然后展平該陣列。
這是回圈版本：
const taskRows = [];
for (const { tasks } of projects) {
for (const { name, description, assigine } of tasks) {
if (assigine === "User1") {
taskRows.push(<div>
<p>{name}</p>
<p>{description}</p>
</div>);
}
}
}
return <div>
<h1>Hello World</h1>
{taskRows}
</div>;
現場示例：
顯示代碼片段
const App = props => {
const projects = [
{
"id": "1JEM8ivAlH073ngLtc3V",
"team": "Engineering",
"priority": "Highest",
"tasks": [
{
"description": "Hello World",
"status": "Open",
"assigine": "User1",
"priority": "Low",
"name": "Friend"
}
],
"visibility": "Public",
"name": "Radiance",
"Owner": "DVcjkvnCuV59RpxxrSbnxHK9rAgfaVriXK3NX51eiv3i",
"description": "ABCDEFGHIJ"
},
{
"id": "dHMVewmo7HYfUSgqDwhH",
"team": "Engineering",
"tasks": [
{
"name": "Implement adapter ",
"status": "Open",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\n",
"priority": "Highest",
"assigine": "User1"
},
{
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\n",
"priority": "Medium",
"name": "Replace old text with new text",
"status": "Doing",
"assigine": "User2"
},
{
"priority": "Highest",
"description": "Loreum ipsum de djdasjknkajcnkjcnskax",
"assigine": "User1",
"name": "SOL Mail",
"status": "Open"
}
],
"description": "ABCDEFGHIJ",
"Owner": "DVcjkvnCuV59RpxxrSbnxHK9rAgfaVriXK3NX51eiv3i",
"visibility": "Public",
"name": "Friend",
"priority": "Highest"
},
{
"id": "2Ld5Afb5Q9TNtqsNRfmc",
"priority": "Highest",
"description": "The react-router-dom package contains bindings for using React Router in web applications. Please see the Getting Started guide for more information on how to get started with React Router.",
"name": "Developers DAO",
"tasks": [
{
"name": "Fix Deprecated libraries",
"status": "Open",
"assigine": "User1",
"description": "Implement Dashboard ",
"priority": "Highest"
},
{
"description": "Fix Deprecated libraries",
"name": "Dikiri Dikiri",
"priority": "Highest",
"assigine": "User2",
"status": "Open",
"visibility": "Doing"
},
{
"status": "Open",
"assigine": "User2",
"description": "Change Authentication Mode",
"priority": "Highest",
"name": "SOL Mail"
},
{
"priority": "Highest",
"assigine": "User1",
"status": "Open",
"description": "Modification of User Interface",
"name": "Hello World"
},
{
"priority": "Medium",
"name": "Hello Bussy",
"description": "React routes modification",
"assigine": "User3",
"status": "Doing"
},
{
"status": "Open",
"assigine": "User2",
"priority": "Highest",
"name": "Friend",
"description": "Hello World"
}
],
"visibility": "Private",
"Owner": "DVcjkvnCuV59RpxxrSbnxHK9rAgfaVriXK3NX51eiv3i",
"team": "Engineering"
}
];
const taskRows = [];
for (const { tasks } of projects) {
for (const { name, description, assigine } of tasks) {
if (assigine === "User1") {
taskRows.push(<div>
<p>{name}</p>
<p>{description}</p>
</div>);
}
}
}
return <div>
<h1>Hello World</h1>
{taskRows}
</div>;
};
ReactDOM.render(
<App />,
document.body
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>但如果你真的想使用map：
const taskRows =
projects.map(({tasks}) =>
tasks.filter(({assigine}) => assigine === "User1")
)
.flat()
.map(({name, description}) => <div>
<p>{name}</p>
<p>{description}</p>
</div>);
return <div>
<h1>Hello World</h1>
{taskRows}
</div>;
現場示例：
顯示代碼片段
const App = props => {
const projects = [
{
"id": "1JEM8ivAlH073ngLtc3V",
"team": "Engineering",
"priority": "Highest",
"tasks": [
{
"description": "Hello World",
"status": "Open",
"assigine": "User1",
"priority": "Low",
"name": "Friend"
}
],
"visibility": "Public",
"name": "Radiance",
"Owner": "DVcjkvnCuV59RpxxrSbnxHK9rAgfaVriXK3NX51eiv3i",
"description": "ABCDEFGHIJ"
},
{
"id": "dHMVewmo7HYfUSgqDwhH",
"team": "Engineering",
"tasks": [
{
"name": "Implement adapter ",
"status": "Open",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\n",
"priority": "Highest",
"assigine": "User1"
},
{
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\n",
"priority": "Medium",
"name": "Replace old text with new text",
"status": "Doing",
"assigine": "User2"
},
{
"priority": "Highest",
"description": "Loreum ipsum de djdasjknkajcnkjcnskax",
"assigine": "User1",
"name": "SOL Mail",
"status": "Open"
}
],
"description": "ABCDEFGHIJ",
"Owner": "DVcjkvnCuV59RpxxrSbnxHK9rAgfaVriXK3NX51eiv3i",
"visibility": "Public",
"name": "Friend",
"priority": "Highest"
},
{
"id": "2Ld5Afb5Q9TNtqsNRfmc",
"priority": "Highest",
"description": "The react-router-dom package contains bindings for using React Router in web applications. Please see the Getting Started guide for more information on how to get started with React Router.",
"name": "Developers DAO",
"tasks": [
{
"name": "Fix Deprecated libraries",
"status": "Open",
"assigine": "User1",
"description": "Implement Dashboard ",
"priority": "Highest"
},
{
"description": "Fix Deprecated libraries",
"name": "Dikiri Dikiri",
"priority": "Highest",
"assigine": "User2",
"status": "Open",
"visibility": "Doing"
},
{
"status": "Open",
"assigine": "User2",
"description": "Change Authentication Mode",
"priority": "Highest",
"name": "SOL Mail"
},
{
"priority": "Highest",
"assigine": "User1",
"status": "Open",
"description": "Modification of User Interface",
"name": "Hello World"
},
{
"priority": "Medium",
"name": "Hello Bussy",
"description": "React routes modification",
"assigine": "User3",
"status": "Doing"
},
{
"status": "Open",
"assigine": "User2",
"priority": "Highest",
"name": "Friend",
"description": "Hello World"
}
],
"visibility": "Private",
"Owner": "DVcjkvnCuV59RpxxrSbnxHK9rAgfaVriXK3NX51eiv3i",
"team": "Engineering"
}
];
const taskRows =
projects.map(({tasks}) =>
tasks.filter(({assigine}) => assigine === "User1")
)
.flat()
.map(({name, description}) => <div>
<p>{name}</p>
<p>{description}</p>
</div>);
return <div>
<h1>Hello World</h1>
{taskRows}
</div>;
};
ReactDOM.render(
<App />,
document.body
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/361210.html
標籤：javascript 反应