时间戳

首页 > 解决方案 > 如何在反应中管理状态？

javascript - 如何在反应中管理状态？

问题描述

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


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;

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

我现在的申请是这样的：

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

标签： javascriptreactjs

解决方案

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

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

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}/>}
/>

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

推荐阅读