Как редактировать файл данных с другой страницы в ReactJS

#arrays #json #reactjs #list #constants

#массивы #json #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",
        titolo:"Community - Quote for API",
        costo:"9999999€",
        descrizione:"sono creato dinamicamente",
        attività:"Prodotto",
        assets:"Competence"
    },
    {
        id:"3",
        titolo:"Community Titolo Diverso - Quote for API",
        costo:"999999999999€",
        descrizione:"sono creato dinamicamente",
        attività:"Prodotto",
        assets:"Competence"
    }
]
export default dataCommunity; 

  

Теперь другой файл может сбивать с толку, но я точно знаю, что const data, которые находятся внутри handlerSubmit(), возвращает мне набор {data inside} правильно, потому что я тестировал с консолью.войти итак, единственное, как мне обновить файл данных с этой страницы, используя собранные мной данные?

 
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

  

Комментарии:

1. если dataCommunity это физический файл, просто импортируйте этот файл в свой SecondPage , назначьте новое свойство data для dataCommunity . Если вы firstPage отображаете содержимое dataCommunity , то новые значения будут отражены при повторном отображении компонента

2. да, dataCommunity это физический файл, мне просто интересно, как я могу повторно отобразить dataCommunity с новыми данными.

3. Как мне добавить свои данные в dataCommunity?