使用過濾器時未呈現的對象的反應列表

Question

我正在嘗試渲染嵌套在項目 object 中的任務，並且我有一個項目對象列表。 我需要使用什么方法以及我缺少什么。

• 我正在做的是遍歷每個項目並獲取與之關聯的任務並過濾掉分配給User1的任務並將它們打印為 Output。
• 但我不知道我的它沒有渲染。

 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>

Answer 1

主要問題是：

• forEach總是返回undefined 。
• 您沒有使用 map 在任何地方創建的數組，因此它會被丟棄。

如果您需要任務列表，則需要從項目列表中提取它。 簡單的方法是創建一個空白數組並添加匹配的任務。 或者，您可以將項目數組 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>