使用三元运算符显示状态中的特定项目答案

【问题标题】：Use ternary operator to show specific items from state使用三元运算符显示状态中的特定项目
【发布时间】：2021-05-30 11:45:45
【问题描述】：

我无法使用三元运算符显示条件输出。我想将一个值传递给一个函数并只显示来自状态的相关信息。我的代码：


import React, {useState} from 'react';

function Tasks({taskId, index}){

 {task.parentId == taskId : }       //Unable to code this.

  return(       //show only tasks where parentId == taskId
         <div>
           <div> {task.title} </div>
           <div> {task.body} </div>
         </div>
        )
}

function App(){

    const[tasks, setTasks] = useState([
        {
            taskId: 1,
            title: 'Task1',
            body: 'This is the body of the task1',
            isComplete: false,
            parentId: 0
        },
        {
            taskId: 2,
            title: 'Task2',
            body: 'This is the body of the task2',
            isComplete: false,
            parentId: 1
        },      
        {
            taskId: 3,
            title: 'Task3',
            body: 'This is the body of the task3',
            isComplete: false,
            parentId: 1
        },
        {
            taskId: 4,
            title: 'Task4',
            body: 'This is the body of the task4',
            isComplete: false,
            parentId: 3
        }
    ])

    return(
            <div style={{marginLeft: 20}}>
                <h1>ToDo</h1>

                {tasks.map((task, index)=>
                    <Tasks 
                        taskId=1
                    />
                )}
            </div>
        )
}

export default App;

所以，我只想显示 parentId 为 1 的任务。我应该怎么做？

【问题讨论】：

标签： javascript reactjs react-native conditional-operator use-state

【解决方案1】：

如果您尝试仅使用指定的id 渲染那些任务，则可能不必使用三元运算符。

function renderTasks(id) {
  return tasks
    .filter(({ taskId }) => taskId == id)
    .map(({ title, body }) => (
      <div>
        <div> {title} </div>
        <div> {body} </div>
      </div>
    ));
}

【讨论】：

【解决方案2】：

为了对代码进行最少的修改，可以返回一个空片段或null：

function Tasks({ task }) {
    return task.parentId == task.taskId
        ? (
            <div>
                <div> {task.title} </div>
                <div> {task.body} </div>
            </div>
        )
        : null;
}

（确保使用parentId，而不是pasrentId，和task.taskId，而不是taskId - 您目前没有将task 作为道具传递，因此请更改代码以执行此操作：@987654327 @)

但我认为在调用者中使用.filter 会更有意义：

return (
    <div style={{ marginLeft: 20 }}>
        <h1>ToDo</h1>
        {tasks
            .filter(task => task.parentId === task.taskId)
            .map(task => <Task task={task} />)
        }
    </div>
)

（由于Tasks 呈现单个任务，请考虑将其称为Task 而不是Tasks）

【讨论】：

我使用了.filter(task => task.parentId == 1)，它可以工作。现在还需要从状态中提取该值。非常感谢。