如何使用 array.push() 方法，以便将数据从一个组件推送到单独文件中的数组中？

Question

I have a component (Task.jsx) that recieves text data from the user, and that data needs to be pushed into an array, which is in it's own file (TaskData.js). How do I get get the input text pushed into the array? Not sure how to get the two files to talk to each other. Code as follows:

TaskData.js

const TaskData = [
    {
        id:8,
        chore: 'wash dishes'
    },
    {
        id:9,
        chore: 'do laundry'
    },
    {
        id:10,
        chore: 'clean bathroom'
    }

]

export default TaskData

Tasks.jsx

import React from 'react'
import TaskData from './TaskData.js'


class Tasks extends React.Component  {
    constructor(props) {
        super(props)
        this.state = {
            updatedTask: '',
            isEditing: false
        }
        this.handleClick = this.handleClick.bind(this)
        this.handleChange = this.handleChange.bind(this)
    }

handleClick () {
    TaskData.push({id:50, chore: 'test'})
        this.setState({
            isEditing:true
        })
      }

handleChange (e) {
    this.setState({
        updatedTask: e.target.value
    })
}



    render() {
    return (
        <div className = 'tasks-container'>
            <div>
                {
                this.state.isEditing ?
                <input onChange = {this.handleChange} className = 'input' placeholder ={this.props.task}/>
                : <h1 className = 'font'>{this.props.task}</h1>  
                }
        <button onClick = {this.handleClick} className ='task-button'>Edit</button> 
            </div>
        </div>
    )
    }
    
}

export default Tasks

Answer 1

Since react runs in the browser, you cannot write data into file. (You can read files though).

Note that in your handleClick when you do TaskData.push(...) you have mutated the array and you will have the updated data in the memory until you refresh the page. So you can use the TaskData variable access the updated data.

If you specifically want to write data to file, you can store it in localStorage or you can save file on the server .