如何在反应中管理状态？

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 },
    ]
  },
  {
    "id": 5,
    "name": "Lineage 3",
    'tasks': [
      { id: "20", name: 'diseñar', "progress": 10 },
      { id: "21", name: 'trabajar', "progress": 20 },
      { id: "22", name: 'construir', "progress": 30 },
      { id: "23", name: 'pensar', "progress": 40 },
      { id: "24", name: 'rehacer', "progress": 50 },
    ]
  }
]

class App extends React.Component {

  state = {
    '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 },
    ]
  }


  handleViewTask = (projectin) => {
  this.setState({
   'tasks':  [{ id: "100", name: 'diseñar', "progress": 10 }]
  })} 

  render() {

    return (
      <div className="App">
        <Header nombre='Joaquin' /> {/*Entregar como name la variable recibida desde server */}
        <Grid container >
          <Grid item xs >
            <Typography variant="h5" component="h5">
              Projects
              </Typography>
            <Projects projects={projects} />
          </Grid>
          <Grid item xs >
            <Typography variant="h5" component="h5">
              Tareas
              </Typography>
            {
              this.state.tasks.map(task =>

                <Task
                  name={task.name}
                  key={task.id}
                  progress={task.progress}
                />
              )
            }

          </Grid>
          <Grid item xs>
            <Typography variant="h5" component="h5">
              Configuración
            </Typography>
            <Hours />


          </Grid>
        </Grid>


      </div>
    );

  }

}

export default App;

我正在实现一个反应应用程序，其中显示了任务和项目。 一个项目可以有许多任务。 我的主视图是所有可用的项目，单击一个项目时，您应该看到它们的相应任务。 我的问题是：通过良好的实践，我应该如何处理应用程序的状态？ 应该显示任务吗？

我现在的申请是这样的：

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

Answer 1

代替设置状态列表中的任务，您应该设置选定的项目ID。 为任务列表有一个单独的组件，然后将所选项目的任务列表作为道具传递。

Answer 2

这取决于您的设计。 您可以在同一屏幕上显示项目的任务，也可以在单独的页面上显示。 此外，由于您没有处理该数据的后端服务，因此在如何处理状态方面没有太多选择。

如果要在同一页面中显示任务，则必须将状态修改为非常类似于您的项目变量：

state={
 {
    "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 },
    ]
  },
  {
    "id": 5,
    "name": "Lineage 3",
    'tasks': [
      { id: "20", name: 'diseñar', "progress": 10 },
      { id: "21", name: 'trabajar', "progress": 20 },
      { id: "22", name: 'construir', "progress": 30 },
      { id: "23", name: 'pensar', "progress": 40 },
      { id: "24", name: 'rehacer', "progress": 50 },
    ]
  }
}

或者，如果您希望您的应用单独处理它，则需要使用react-router将路由映射到其他组件，并传递道具以显示所需的数据。 就像是：

<Route
  path='/tasks'
  render={(props) => <Tasks{...props}/>}
/>

在这种情况下，任务将是一个功能/哑组件，因为它仅用于显示数据，并且仅在用户单击项目或您可能要触发的任何事件时才显示。