Je ne peux pas mettre à jour la valeur de l'état. Et comment charger le champ de texte avec la valeur d'état actuelle?
Voir ci-dessous: P>
class Form extends React.Component{
constructor(props){
super(props);
this.state = {
user: '',
firstName: '',
lastName: '',
email: ''
}
}
handleChange(field, e){
let fields = this.state.fields;
fields[field] = e.target.value;
this.setState({fields});
}
componentDidMount() {
axios.all([
axios.get(config.getUser),
axios.get(config.getFullName).catch(function() { return false})
])
.then(axios.spread(function (user, fullName) {
console.log("USER: ", this.state.user)
console.log("FULLNAME: ", this.state.fullName)
var number = user.data.number;
var firstName = user.data.firstName;
var lastName = user.data.lastName;
if (number !== undefined) {
this.setState({user: number})
console.log("NUMBER: ", this.state.user) ==> doesn't print
}
if (fullName !== false || firstName !== undefined) {
this.setState({firstName: firstName});
console.log("GET firstName: ", this.state.firstName); ==> doesn't print
this.setState({lastName: lastName});
console.log("GET lastName: ", this.state.lastName);
}
}))
}
render() {
console.log("STATE: ", this.state)
return (
<div>
<form name="form" onSubmit= {this.formSubmit.bind(this)} style={{minWidth: '515px'}}>
<Header title="Request" />
<Paper style={styles.paperRequestForm}>
<Grid container>
<TextField
required
name="number"
type="text"
label="number"
margin="dense"
variant="outlined"
// InputProps={{
//readOnly: true,
// }}
style={{width:202.5}}
InputProps={{
autoComplete: 'off',
style: {
font: '14px arial,serif',
backgroundColor: "white"
}}}
InputLabelProps={{
style: {
font: '14px arial,serif',
backgroundColor: "white"
}}}
onChange={this.handleChange.bind(this, "number")}
value={this.state.user} ==> does not load data
/>
</Grid>
3 Réponses :
SetState () est asynchrone, vous ne pouvez pas obtenir de valeur mise à jour dans la ligne immédiate. Vous devez utiliser n'importe quel autre événement de cycle de vie (composantWillUpdate () ou en rendu ()) ou vous pouvez transmettre un rappel à la SSTATE () comme ci-dessous:
if (number !== undefined) {
this.setState({user: number}, ()=> console.log("NUMBER: ", this.state.user))
}
if (fullName !== false || firstName !== undefined) {
this.setState({firstName: firstName}, ()=>console.log("GET firstName: ", this.state.firstName); );
this.setState({lastName: lastName}, ()=> console.log("GET lastName: ", this.state.lastName));
;
}
hi s'il vous plaît modifier votre Handlechange Fonction et texte, j'espère que c'est utile.
Merci
Le premier problème est avec votre fonction Handlechanger, c'est exactement une chose différente de ce que vous interciez à faire.
Il devrait plutôt être p> Deuxièmement, votre composantDidMount () semble également avoir accès aux champs qui n'existent pas. Il devrait plutôt ressembler ci-dessous si nous envisageons la réponse que vous avez fournie. P> <TextField
required
//note here the name is user and not number
name="user"
type="text"
label="number"
margin="dense"
variant="outlined"
// InputProps={{
//readOnly: true,
// }}
style={{width:202.5}}
InputProps={{
autoComplete: 'off',
style: {
font: '14px arial,serif',
backgroundColor: "white"
}}}
InputLabelProps={{
style: {
font: '14px arial,serif',
backgroundColor: "white"
}}}
//call the handleChange here
onChange={this.handleChange}
value={this.state.user}
/>
Ne devrait pas
var numéro = user.number.number au lieu devar numéro = user.data.number en fonction de votre objet de réponse? Par conséquent, cela n'ira jamais à l'intérieur si des déclarations.Tout d'abord, votre méthode HandLechange accède aux champs de l'état qui n'existent pas