gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 16:42:28 27 4
gpt4 key购买 nike

感谢您阅读这个问题,我是 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 中。有什么建议吗???

最佳答案

在您的应用渲染中...

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]
}));

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

关于javascript - react : why the tasks doesn't appear?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60954888/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com