javascript - react : why the tasks doesn't appear?

Question

感谢您阅读这个问题，我是 React 新手，我尝试做一个任务应用程序，所以我这样做。

App.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 (O.o)\，但只是处于状态，不会出现在 UI 中。有什么建议吗？？？

Answer 1

在您的应用的渲染中...

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

...你有:

      <Tasks tasks={tasks}/>    

它使用范围内绑定(bind)(宽松地，“变量”)任务，而不是状态属性。因此，它只能看到您从 JSON 加载的任务，因为您将它们分配给 import 中的绑定(bind) tasks。

您可能想从 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]
}));

您所拥有的大部分时间都可以工作，但由于您是根据现有状态更新状态，并且状态更新是异步的并且可以一起批处理，因此使用回调形式更可靠。