ReactJS

Question

我正在使用 ReactJS、NodeJS，MongoDB。

在我的项目中，我有一个任务列表，我正在添加新任务（这行得通！）但是当我刷新页面时只有 appends/show 这个新任务，但我使用的是 ReactJS，所以我可以更多 responsive/interactive 网站，但我是新手，我还在学习，我不知道该怎么做...也许我必须与国家合作？！

希望你能帮助我！谢谢！

这是我的 NewTask 组件：

import React, { Component } from 'react';
import './NewTask.css';


class NewTask extends Component {
constructor(props) {
    super(props);
    this.state = {
        projectId: null,
        tasktitle: '',
        taskcomment: ''
    };
}

postDataHandler = () => {
    let data = {

        tasktitle: this.state.tasktitle,
        taskcomment: this.state.taskcomment

    };
    fetch(`/dashboard/project/${this.props.projectId}/tasks/newtask`, {
        method: 'POST',
        data: data,
        body: JSON.stringify(data),
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(response => { return response.json() })
        .catch(error => console.error('Error:', error));

}

render() {
    return (
        <div>
    <input type='text' className='form-control input--task' required placeholder='Task Title' value={this.state.tasktitle} name='tasktitle' ref='tasktitle' onChange={(event) => this.setState({ tasktitle: event.target.value })} />
    <button type='submit' className='btn btn-default button--newtask' value='Submit' onClick={this.postDataHandler}>Add Task</button>
        </div>

     );
  }
}

export default NewTask;

这里服务器端创建新任务

    //Create New Task
exports.create_new_task = (req, res) => {
    let projectid = req.params.id;

        Task.create({
            tasktitle: req.body.tasktitle,
            taskcomment: req.body.taskcomment,
            project: req.params.id
        }, (err, tasks) => {
            if (err) {
                console.log(err);
            }
           Project.findById(projectid, (err, project) => {
                if(err) {
                    console.log(err);
                }


                project.tasks.push(tasks._id);
                project.save(); 

                console.log('NEW Task added to project: ' + projectid)
                res.json(tasks)
           });
        });
};

这是我的 任务组件

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTrashAlt, faEdit } from '@fortawesome/free-solid-svg-icons'

import './Tasks.css';



class Tasks extends Component {
    constructor(props) {
        super(props);
        this.state = {
            projectId: props._id,
            tasks: []
        };
    }

    componentDidMount() {
        fetch(`/dashboard/project/${this.props.projectId}/tasks`)
            .then(response => {
                return response.json()
            }).then(task => {
                this.setState({
                    tasks: task.tasks
                })
            }).catch(error => console.error('Error:', error));
    }


    render() {


        const fontawesomeiconStyle = {
            fontSize: '1em',
            color: '#8e8359',
            textAlign: 'center'
        }

        const listStyle = {
            display:'grid', 
            gridTemplateColumns:'2fr 1fr',
            alignItems: 'center', 
            justifyItems: 'center'
        }

        const { tasks } = this.state;
        return (
            <div>
                    <ul className="task-list">
                    {tasks.map(task =>
                    <li key={task._id} style={listStyle}>{task.tasktitle} 

                   <div>
                   <form method='POST' action={`/dashboard/project/${this.props.projectId}/tasks/delete?_method=DELETE&taskId=${task._id}`}>
                        <button className="button--tasks" >
                        <FontAwesomeIcon style={fontawesomeiconStyle} icon={faTrashAlt} />
                        </button>
                        </form>
                       </div>
                         </li>
                    )}
                    </ul>
              </div>
         );

     }
 }

export default Tasks;

Here's a gif so you can see what's really happening, only appends the new task when I refresh the page..

Answer 1

在 POST 新项目之后，您还必须 GET 新项目以及项目列表组件中的新项目。

您可以将 NewTask 和 TaskList 组件放在一个 class 组件中，该组件可以在 POST 承诺解决和更新后执行 GET新项目的状态。

或者您可以使用 Redux 或其他状态处理程序，这些处理程序将使用按正确顺序触发事件的操作。

Answer 2

您可以 return 来自 POST 方法的任务对象，然后附加到现有任务列表。像这样：

postDataHandler = () => {
    /* removed for brevity */
    .then(response => response.json())
    .then(response => {
        // append to existing list of tasks
        this.props.appendTask(response);
    })
    .catch(error => console.error('Error:', error));
}

// method in parent component
// passed down through props
appendTask = task => {
    let tasks = [...this.state.tasks];
    tasks.push(task);
    this.setState({tasks});
}

只有当 state 中的更改影响正在呈现的内容时，您的列表才会重新呈现。您要么需要重新获取完整的任务列表，要么手动附加您的新任务，这就是上面示例中所做的。

这是一个更完整的例子：

class TaskList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tasks: [
                {/* task 1 */},
                {/* task 2 */}
            ]
        }
    }
    appendTask = task => {
        let tasks = [...this.state.tasks];
        tasks.push(task);
        this.setState({tasks});
    }
    render() {
        const { tasks } = this.state;
        return (
            <div className="tasks">
                <ul>
                    {tasks.map(task => <TaskItem task={task}/>)}
                </ul>
                <NewTask appendTask={this.appendTask}/>
            </div>
        );
    }
}

class NewTask extends Component {
    /* ... */
    postDataHandler = () => {
        /* ... */
        .then(response => response.json())
        .then(response => {
            // append to existing list of tasks
            this.props.appendTask(response);
        })
        .catch(error => console.error('Error:', error));
    }
    /* ... */
}

Answer 3

看，您正在向后端发出 POST 请求，对吧？看起来，它存储正确，但您没有对它做任何事情。一种方法是按照 @wdm 建议的类似方式进行，或者使用 setState 将 'task' 附加到您的当前状态，但前提是它是发在第一位对吧？ :)

确保 backend 中的 response 是您发布的 data，使用该响应并使用 ... 扩展运算符将其附加到已经存在的状态。 setState 将触发重新渲染，您将列出所有任务。

ReactJS - 项目不会立即附加刷新页面

ReactJS - item doesn't append instantly only refreshing page

state

add

node.js