使用过滤器时未呈现的对象的反应列表

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>