如何在ReactJS中从另一个页面编辑数据文件

如何解决如何在ReactJS中从另一个页面编辑数据文件

我有2页：（1）第一页只是一个数据文件[Data.js]。（2）我有一个带有表单的页面，在我填写完表单并按保存后，它会将表单中的所有数据存储在{name：“ name”，price：“ price”}这样的集合中，我想以某种方式将此集发送到包含以下所有集的数据文件中：

const dataCommunity = [
    {
        id:"1",titolo:"Community - Quote for API",costo:"99€",descrizione:"sono creato dinamicamente",attività:"Prodotto",assets:"Competence"
    },{
        id:"2",costo:"9999999€",{
        id:"3",titolo:"Community Titolo diverso - Quote for API",costo:"999999999999€",assets:"Competence"
    }
]
export default dataCommunity;

现在其他文件可能令人困惑，但是我可以肯定，在handlerSubmit（）内部的 const数据给了我{内部数据}正确的设置，因为我使用console.log进行了测试，因此唯一的是 如何使用收集到的数据来更新此页面上的数据文件？


class AttivaCommunity extends React.Component{
    constructor(props){
        super(props)
        this.state={
            titolo:"",costo:"",attività:"",assets:"",descrizione:"",search:""
        }
    
    }
    updateSearch(event){
        this.setState({search:event.target.value.substr(0,20)})
    }
    handleSubmit=(event)=>{
        event.preventDefault()
        const data = this.state
        console.log(data)
    }

    render(){
        let offers = dataCommunity.filter(
            (offer)=>{return offer.titolo.indexOf(this.state.search) !== -1}
        );
        return(
            <div>
            <MPheader/>  
            <Link to="/Marketing/Marketing/Nuovo prodotto"><button className="myButton" type="button" style={{margin:"10px"}}>Aggiungi</button></Link>
            <IslandersHeader nome="HUI MARKETPLACE" sottoheader="Buy all Hui apps and services and sell your Island’s goods and services"/>
            
            <Container fluid className="MainPageRow2">
                <Form onSubmit={this.handleSubmit}>
                    <Form.Row className="Col_margin py-5 px-1">
                        <Col md={2} className="Col_margin px-1">
                            <TextForm nome="Nome"/>
                        </Col>
                        <Col md={2} className="Col_margin px-1">
                            <SelectDa4 nome="Island" option1="Tutte" option2="Approvato" option3="In attesa" option4="Rifiutato"/>
                            
                        </Col>
                        <Col md={2} className="Col_margin px-1">
                            <SelectDa4 nome="Attività" option1="Prodotto" option2="Mercato" option3="Foundraising" option4="Corporate"/>
                        </Col>
                        <Col md={2} className="Col_margin px-1">
                            <SelectDa4 nome="Asset" option1="Prodotto" option2="Mercato" option3="Foundraising" option4="Corporate"/>
                        </Col>
                        <Col md={2} className="Col_margin px-1">
                            <SelectDa3 nome="Risultati per Pagina" option1="10" option2="20" option3="30"/>
                        </Col>
                        <Col md={2} className="Col_margin px-1">
                            <Form.Label className="checktext">Cerca</Form.Label>
                            <Form.Control type="text" placeholder={this.props.nome} value={this.state.search} onChange={this.updateSearch.bind(this)} name="cerca"/>
                        </Col>
                    </Form.Row>
                    <Form.Row className="Col_margin px-1 py-2">
                        <button className="myButton" type="submit" style={{marginLeft:"30px"}}>Filtra</button>
                    </Form.Row>
                </Form>
            </Container>
            <Container fluid className="MainPageRow2">
                <Row className="Col_margin py-1 px-1">
                    {offers.map((offerta)=> <MarketDiv key={offerta.id} titolo={offerta.titolo} costo={offerta.costo} descrizione={offerta.descrizione} attività={offerta.attività} assets={offerta.assets}/>)}
                </Row>
            </Container>  
            
            </div> 

            )
        }
                    
    }
export default AttivaCommunity