#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?