Je souhaite afficher mes données après avoir cliqué sur le bouton. J'utilise le rendu de condition dans mon composant et crée une variable booléenne dans l'objet d'état. Après avoir cliqué sur le bouton, la variable est modifiée et (comme je m'y attendais) mes données ont été rendues. Mais rien ne se passe. Je sais que c'est une erreur fondamentale.
class SortingMyArray extends React.Component {
constructor(props) {
super(props)
this.state = {
addcomments: addcomments,
isClicked : false
}
// this.sortBy = this.sortBy.bind(this)
}
sortBy() {
let sortedComments = [...this.state.addcomments].sort((a,b) => new Date(b.date) - new Date(a.date));
this.setState({
addcomments: sortedComments,
isClicked : true
})
console.log(this.state.isClicked)
}
render(){
return(
<div>
<div>
<button
onClick={() => this.sortBy() }>AdditionalCommentaries
</button>
</div>
</div>
)
if (this.state.isClicked){
return(
<div>
<div>
<AddComments addcomments = {this.state.addcomments} />
</div>
</div>
)
}
}
}
export default SortingMyArray;
3 Réponses :
Vous ne devriez pas avoir plus d'un retour dans la méthode de rendu. Essayez plutôt ceci:
Remarque: Il n'y a pas d'instruction if-else dans JSX mais nous utilisons celle ci-dessous
render(){
return(
<div>
<div>
<button
onClick={() => this.sortBy() }>AdditionalCommentaries
</button>
</div>
</div>
{
this.state.isClicked
&&
<div>
<div>
<AddComments addcomments = {this.state.addcomments} />
</div>
</div>
}
)
}
Merci. J'ai compris comment ça marche. C'était une erreur)
Cette partie de votre code est inaccessible par le programme car elle est placée après return . Vous ne devriez pas avoir deux retours.
render() {
return (
<div>
<div>
<button onClick={() => this.sortBy()}>
AdditionalCommentaries
</button>
</div>
{this.state.isClicked && (
<div>
<div>
<AddComments
addcomment={this.state.addcomments}
/>
</div>
</div>
)}
</div>
)
}
De plus, votre instruction conditionnelle n'est pas JSX valide. Votre méthode de rendu devrait ressembler à ceci
if (this.state.isClicked){
return (
<div>
<div>
<AddComments
addcomments={this.state.addcomments}
/>
</div>
</div>
)
}
Vous devez restructurer votre méthode render car une partie du code est inaccessible, vous n'avez pas non plus besoin d'utiliser une phrase IF, vous pouvez utiliser opérateur logique && pour demander si isClicked est vrai pour renvoyer AddComments composant.
Vous devez installer eslinter dans votre éditeur de code, cela peut vous aider à détecter ce type erreurs ou autres
MÉTHODE DE RENDU:
render() {
//You can destructuring object, in this case your state is the object
const { isClicked, addcomments } = this.state;
return (
<div>
<div>
<button onClick={() => this.sortBy()}>AdditionalCommentaries</button>
</div>
{isClicked && (
<div>
<AddComments addcomments={addcomments} />
</div>
)}
</div>
);
}
Toutes les réponses ci-dessous sont bonnes. Je voudrais faire une suggestion, qui vous faciliterait la vie à long terme: utilisez et suivez la documentation à jour. L'approche classique pour réagir est très rigide et lourde. La seule raison pour laquelle vous avez une classe en ce moment, au lieu d'un composant fonctionnel est à cause de la gestion de l'état local. Eh bien, jetez un œil aux hooks et soyez éclairé;) reactjs.org/docs/hooks-intro. html