I stumbled uppon a issue when working on my first react app. I have rest api defined by me in flask-python and this endpoint looks like this:
@app.route('/personal_data', methods=['GET', 'POST'])
def personalData():
if 'language' in request.args:
personaldata = PersonalData(request.args.get('language'))
else:
personaldata = PersonalData('pl')
if request.method == "POST":
db.session.add(personaldata)
db.session.commit()
return jsonify(object_as_dict(personaldata))
My issue is when i call get in react, my data refreshs on sceen, but when i try to save it it append to last displayed "personal data".
My react code:
const Header =({title}) =>{
const [pdButtonClicked, setpdclicked] = useState(false)
const [pdButtonClicked1, setpdclicked1] = useState(false)
const [creditDataClicked, setcreditdataClicked] = useState(false)
const [companyDataClicked, setcompanyDataClicked] = useState(false)
const [personal_data, setPD] = useState([])
const [personal_data1, setPD1] = useState([])
const [credit_data, setCreditData] = useState([])
const [company_data, setCompanyData] = useState([])
const PdbuttonClicked = ()=>{
axios.get('/personal_data')
.then(res => {
setPD([res.data]);
});
setpdclicked(true)
}
const CreditDataClicked = ()=>{
axios.get('/credit_data')
.then(res => {
setCreditData([res.data]);
});
setcreditdataClicked(true)
}
const CompanyDataClicked = ()=>{
axios.get('/company_data')
.then(res => {
setCompanyData([res.data]);
});
setcompanyDataClicked(true)
}
const SavePersonalDataClicked = ()=>{
axios.post('/personal_data')
.then(res => {
setPD1([res.data]);
});
setpdclicked1(true)
}
return (
<>
<header className='header'>
<h1> {title} </h1>
<Button title = "personal data" onClick = {PdbuttonClicked}/>
<Button title = "credit data" onClick = {CreditDataClicked}/>
<Button title = "company data" onClick = {CompanyDataClicked}/>
<Button title = "save personal Data" onClick = {SavePersonalDataClicked}/>
</header>
<body>
<div> <h8>Personal Data:</h8>
{pdButtonClicked == true ? <PersonalData data = {personal_data}/> : ""}
{pdButtonClicked1 == true ? <PersonalData data = {personal_data1}/> : ""}
<h8>Credit Data:</h8>
{creditDataClicked == true ? <CreditData data = {credit_data}/> : ""}
<h8>Company Data: </h8>
{companyDataClicked == true ? <CompanyData data = {company_data}/> : ""}
</div>
</body>
</>
)
};
Header.defaultProps ={
title: "Test Data Generator",
}
Header.propTypes ={
title: PropTypes.string.isRequired,
}
export default Header
For the start i don't exactly understand why on get it refreshes my display. When i click button responsible for post method i can append output to infinite.
Aucun commentaire:
Enregistrer un commentaire