Реагируйте: почему задачи не появляются? - PullRequest
Новая
       49

Реагируйте: почему задачи не появляются?

0 голосов
/ 31 марта 2020

и спасибо за чтение этого вопроса, я новичок в React и пытаюсь создать приложение для задач, поэтому я делаю это.

Приложение. js

import React, { Component }from 'react' 
import ReactDOM from 'react-dom'
import TaskForm from './components/TaskForm';
import tasks from './samples/tasks.json'
import Tasks from './components/tasks'

class App extends Component{ 
state ={
  tasks : tasks
}
addTask = (title, description) =>{
  const newTask = {
    title : title,
    description : description,
    id : this.state.tasks.lenght
  }
  this.setState({
    tasks : [...this.state.tasks, newTask]
  })
  console.log(this.state)
}
  render(){
    return(
    <div>
        <TaskForm addTask={this.addTask}/>
      <Tasks tasks={tasks}/>    
    </div>
    )
  }
ReactDOM.render(<App/>, document.getElementById('root'));

задачи. json

[
        {
            "id": 0,
            "title": "espada",
            "description": "esta es un arma japonesa que bla bla bla bla bla bla bla bla",
            "done" : false
        },
        {
            "id": 1,
            "title": "pistola",
            "description": "pistola semi-automatica que sirve para pegar tiros bla bla bla",
            "done" : false
        },
        {
            "id": 2,
            "title": "ballesta",
            "description": "loren ipsum dolor no se que carajos seguia despues bla bla bla",
            "done" : false
        },
        {
            "id": 3,
            "title": "sable pistola",
            "description": "sacado de la franquisia de juegos",
            "done" : false
        }
]

задачи. js

import React, { Component } from 'react';
import Task from './Task';
import propTypes from 'prop-types';

export default class Tasks extends Component{

    render (){
        return(
            this.props.tasks.map(task => <Task task={task} key={task.id}/> )
        );
    }
}
Tasks.propTypes = {
    tasks : propTypes.array.isRequired
}

задача. js

import React,{ Component } from "react";
import propTypes from 'prop-types';

export default class Task extends Component{
     state = {
        done : this.props.task.done
    }
    styleCompleted(){
       return {
            fontSize : '20px',
            color : this.props.task.done ? 'grey' : 'black',
            textDecoration : this.props.task.done ? 'line-through' : 'none'
        }
    }
    render(){
        const {task} = this.props; // con esta linea extraemos el arreglo que nos stan devolviendo y lo guardamos en otro llamado task        
            return(
                <div style={this.styleCompleted()}>
                    {task.title} -  
                    {task.id} - 
                    {task.description}  
                    <input type="checkbox"/>
                    <button style={btnDelete}>
                      x
                    </button>
                </div>     
            );
    }
}
Task.propTypes = {
    task : propTypes.object.isRequired
}

const btnDelete = {
    fontSize : '18px',
    background : 'red',
    color : '#fff',
    border : 'none',
    padding : '10px 15px',
    borderRadius : '50%',
    cursor : 'pointer'
}

taskForm. js

 import React, { Component} from 'react';

export default class TaskForm extends Component{ 
    state = {
        title : '',
        description : ''
    }
onSubmit = e =>{
    e.preventDefault(); // if put this line after addTask the page refresh
    this.props.addTask(this.state.title, this.state.description);
}
onChange = e =>{
    console.log(e.target.name, e.target.value);
    this.setState({
        [e.target.name] : e.target.value});
}
render(){
    console.log(this.props)
    return(
        <form onSubmit={this.onSubmit}>         
            <input 
            name="title"
            type="text" 
            placeholder="write a task" 
            onChange={this.onChange}
            value={this.state.title}/>
            <br/>
            <br/>
            <textarea 
            name="description"
            placeholder="write a description" 
            onChange={this.onChange}
            value={this.state.descirption}/>
            <br/>
            <input type="submit"/>
          </form>
    );
}
  }

когда я пытаюсь добавить newTask при первом щелчке, ничего не происходит, но при втором добавляется newTask (Oo) \, но просто в состоянии не отображаются в пользовательском интерфейсе. любое предложение ???

Ответы [ 2 ]

2 голосов
/ 31 марта 2020

В ваших App render ... 

render(){
  return(
    <div>
      <TaskForm addTask={this.addTask}/>
      <Tasks tasks={tasks}/>    
    </div>
  )
}

... у вас есть: 

      <Tasks tasks={tasks}/>

, который использует привязку в области (свободно, «переменная») tasks, а не государственная собственность. Таким образом, он всегда видит только те задачи, которые вы загрузили из JSON, поскольку вы назначили их для привязки tasks в import.

Вы, вероятно, хотите вместо этого визуализировать задачи из state Например: 

<Tasks tasks={this.state.tasks}/>

или чаще: 

render(){
  const {tasks} = this.state;
  return(
    <div>
      <TaskForm addTask={this.addTask}/>
      <Tasks tasks={tasks}/>    
    </div>
  )
}

Вы также можете использовать версию обратного вызова setState при обновлении задач: 

this.setState(({tasks}) => ({
  tasks: [...tasks, newTask]
}));

То, что у вас есть, будет работать в основном большую часть времени, но поскольку вы обновляете состояние на основе существующего состояния, и поскольку обновления состояний являются асинхронными и могут быть объединены в пакеты, использование формы обратного вызова более надежно.

1 голос
/ 31 марта 2020

Решение проблемы: 

<Tasks tasks={this.state.tasks} />

Также просто несколько советов, попробуйте использовать setState вот так 

this.setState({
    tasks : [...this.state.tasks, newTask]
})

для этого 

this.setState((state) => ({
    tasks : [...state.tasks, newTask]
}));

Подробнее о том, почему здесь : https://reactjs.org/docs/react-component.html#setstate

...