如何管理反应中的状态？

Question

我正在实现一个显示任务和项目的反应应用程序，但我不知道如何管理状态

import React from 'react';

import './App.css';

import Header from './Components/Header.js'

import Projects from './Components/ProjectsList'

import Task from './Components/Task'

import Grid from '@material-ui/core/Grid';

import Typography from '@material-ui/core/Typography';

import Hours from './Components/Hours'

var projects = [

  {

    "id": 1,

    "name": "Fifa19",

    'tasks': [

      { id: "1", name: 'diseñar', "progress": 10 },

      { id: "2", name: 'trabajar', "progress": 20 },

      { id: "3", name: 'construir', "progress": 30 },

      { id: "4", name: 'pensar', "progress": 40 },

      { id: "5", name: 'rehacer', "progress": 50 },

    ]

  },

  {

    "id": 2,

    "name": "StarWars",

    'tasks': [

      { id: "5", name: 'diseñar', "progress": 10 },

      { id: "6", name: 'trabajar', "progress": 20 },

      { id: "7", name: 'construir', "progress": 30 },

      { id: "8", name: 'pensar', "progress": 40 },

      { id: "9", name: 'rehacer', "progress": 50 },

    ]

  },

  {

    "id": 3,

    "name": "Pocoyo",

    'tasks': [

      { id: "10", name: 'diseñar', "progress": 10 },

      { id: "11", name: 'trabajar', "progress": 20 },

      { id: "12", name: 'construir', "progress": 30 },

      { id: "13", name: 'pensar', "progress": 40 },

      { id: "14", name: 'rehacer', "progress": 50 },

    ]

  },

  {

    "id": 4,

    "name": "Doraemon",

    'tasks': [

      { id: "15", name: 'diseñar', "progress": 10 },

      { id: "16", name: 'trabajar', "progress": 20 },

      { id: "17", name: 'construir', "progress": 30 },

      { id: "18", name: 'pensar', "progress": 40 },

      { id: "19", name: 'rehacer', "progress": 50 },

    ]

我正在实施一个反应应用程序，它显示了任务和项目。一个项目可以有很多任务。我的主要视图是所有可用的项目，当单击其中一个时，您应该看到它们对应的任务。我的问题是：有了好的做法，我应该如何处理应用程序的状态？是否应该显示任务？

我现在的申请是这样的：

我有一个带有项目组件和其他任务的应用程序组件。每一个都分别有几个项目和任务组件。

Answer 1

您应该设置选定的项目 ID，而不是在状态中设置任务列表。为任务列表创建一个单独的组件，然后将所选项目的任务列表作为道具传入。

Answer 2

这取决于您的设计。您可以在同一屏幕上显示项目的任务，或者您可以有一个单独的页面来这样做。此外，由于您没有处理这些数据的后端服务，因此在如何处理状态方面没有太多可供选择的选项。如果要在同一页面中显示任务，则必须将状态修改为与项目变量非常相似：state={&nbsp;{&nbsp; &nbsp; "id": 1,&nbsp; &nbsp; "name": "Fifa19",&nbsp; &nbsp; 'tasks': [&nbsp; &nbsp; &nbsp; { id: "1", name: 'diseñar', "progress": 10 },&nbsp; &nbsp; &nbsp; { id: "2", name: 'trabajar', "progress": 20 },&nbsp; &nbsp; &nbsp; { id: "3", name: 'construir', "progress": 30 },&nbsp; &nbsp; &nbsp; { id: "4", name: 'pensar', "progress": 40 },&nbsp; &nbsp; &nbsp; { id: "5", name: 'rehacer', "progress": 50 },&nbsp; &nbsp; ]&nbsp; },&nbsp; {&nbsp; &nbsp; "id": 2,&nbsp; &nbsp; "name": "StarWars",&nbsp; &nbsp; 'tasks': [&nbsp; &nbsp; &nbsp; { id: "5", name: 'diseñar', "progress": 10 },&nbsp; &nbsp; &nbsp; { id: "6", name: 'trabajar', "progress": 20 },&nbsp; &nbsp; &nbsp; { id: "7", name: 'construir', "progress": 30 },&nbsp; &nbsp; &nbsp; { id: "8", name: 'pensar', "progress": 40 },&nbsp; &nbsp; &nbsp; { id: "9", name: 'rehacer', "progress": 50 },&nbsp; &nbsp; ]&nbsp; },&nbsp; {&nbsp; &nbsp; "id": 3,&nbsp; &nbsp; "name": "Pocoyo",&nbsp; &nbsp; 'tasks': [&nbsp; &nbsp; &nbsp; { id: "10", name: 'diseñar', "progress": 10 },&nbsp; &nbsp; &nbsp; { id: "11", name: 'trabajar', "progress": 20 },&nbsp; &nbsp; &nbsp; { id: "12", name: 'construir', "progress": 30 },&nbsp; &nbsp; &nbsp; { id: "13", name: 'pensar', "progress": 40 },&nbsp; &nbsp; &nbsp; { id: "14", name: 'rehacer', "progress": 50 },&nbsp; &nbsp; ]&nbsp; },&nbsp; {&nbsp; &nbsp; "id": 4,&nbsp; &nbsp; "name": "Doraemon",&nbsp; &nbsp; 'tasks': [&nbsp; &nbsp; &nbsp; { id: "15", name: 'diseñar', "progress": 10 },&nbsp; &nbsp; &nbsp; { id: "16", name: 'trabajar', "progress": 20 },&nbsp; &nbsp; &nbsp; { id: "17", name: 'construir', "progress": 30 },&nbsp; &nbsp; &nbsp; { id: "18", name: 'pensar', "progress": 40 },&nbsp; &nbsp; &nbsp; { id: "19", name: 'rehacer', "progress": 50 },&nbsp; &nbsp; ]&nbsp; },&nbsp; {&nbsp; &nbsp; "id": 5,&nbsp; &nbsp; "name": "Lineage 3",&nbsp; &nbsp; 'tasks': [&nbsp; &nbsp; &nbsp; { id: "20", name: 'diseñar', "progress": 10 },&nbsp; &nbsp; &nbsp; { id: "21", name: 'trabajar', "progress": 20 },&nbsp; &nbsp; &nbsp; { id: "22", name: 'construir', "progress": 30 },&nbsp; &nbsp; &nbsp; { id: "23", name: 'pensar', "progress": 40 },&nbsp; &nbsp; &nbsp; { id: "24", name: 'rehacer', "progress": 50 },&nbsp; &nbsp; ]&nbsp; }}或者，如果您希望您的应用程序单独处理它，则需要使用 react-router 将路由映射到其他组件并传递 props 以显示您想要的数据。类似的东西：<Route&nbsp; path='/tasks'&nbsp; render={(props) => <Tasks{...props}/>}/>在这种情况下，任务将是一个功能性/哑组件，因为它仅用于显示数据，并且只有在用户单击项目或您可能想要触发的任何事件时才会显示。