J'ai un composant parent qui a 1 enfant. Je mets à jour mon enfant en passant des données à travers des accessoires. au début, cela fonctionne bien, mais lorsque je clique sur un bouton et que je mets à jour l'état à l'aide de setState, l'enfant est rendu avec les anciennes valeurs au moment où setState est terminé. Je l'ai résolu en utilisant composantWillReceiveProps dans l'enfant, mais est-ce la bonne façon?
Dans le code ci-dessous, si je configure setState dans la fonction filterResults, le composant Emplist ne sera pas mis à jour.
import React, { Component } from 'react';
import {Search} from './search-bar'
import Emplist from './emplist'
class App extends Component {
constructor(props){
super(props);
this.emp=[{
name:'pawan',
age:12
},
{
name:'manish',
age : 11
}]
this.state={emp:this.emp};
this.filterResults=this.filterResults.bind(this);
}
filterResults(val)
{
if(this.state)
{
let filt=[];
filt.Push(
this.emp.find(e=>{
return e.age==val
})
);
this.setState({emp:filt});
}
}
render() {
return (
<div className="App">
<Search filterResults={this.filterResults}/>
<Emplist emp={this.state.emp}/>
</div>
);
}
}
export default App;
EmpList Componet
import React,{Component} from 'react'
export default class Emp extends Component
{
constructor(props){
super(props);
this.emplist=this.props.emp.map(e=>{return <li>{e.name}</li>});
this.next=this.emplist;
}
componentWillReceiveProps(nextProps,nextState,prevProps,prevState,nextContext,prevContext){
// this.props.updated(this.props.empo);
this.next=nextProps.emp[0];
if(this.next)
this.emplist= nextProps.emp.map(e=>{return <li>{e.name}</li>});
}
render(){
if(!this.next)
return <div>name not found</div>
else
return (
<div>
<br/>
<p>The list is here</p>
<ul>
{this.emplist}
</ul>
</div>
)
}
}
Si vous voulez passer de parent à enfant, vous pouvez utiliser des accessoires et si vous ne voulez pas inverser, vous pouvez transmettre une fonction de parent à enfant et utiliser cette fonction passée pour renvoyer quelque chose à parent.
l'enfant va ressembler à quelque chose comme ça
class Reciepe extends Component{
render(){
const { title, img, instructions } = this.props;
const ingredients=this.props.ingredients.map((ing,index)=>(<li key={index} >{ing}</li>));
return (
<div className='recipe-card'>
<div className='recipe-card-img'> <img src={img} alt={title}/> </div>
<div className='recipe-card-content'>
<h3 className='recipe-title'>Reciepe {title}</h3>
<ul> {ingredients} </ul>
<h4>Instructions:</h4>
<p>{instructions}</p>
</div>
</div>
)
}
}
parent va ressembler à quelque chose comme ça
class RecipeList extends Component{
render(){
return (
<div style={{'display':'flex'}}>
{this.props.recipes.map((item,index)=>(
<Recipe key={index}
title={item.title}
ingredients={item.ingredients}
instructions={item.instructions}
img={item.img}
/>
))}
</div>
)
}
}
Le problème est que vous attribuez les valeurs à ce qui n'est pas une bonne pratique. Vérifiez où déclarer la variable dans React ici .
Si vous n'utilisez pas les accessoires pour effectuer des opérations complexes. Cela devrait marcher.
EmpList Componet
import React, {Component} from 'react'
export default class Emp extends Component {
constructor(props) {
super(props);
}
render() {
if (!this.next)
return <div>name not found</div>;
else
return (
<div>
<br/>
<p>The list is here</p>
<ul>
{this.props.emp && this.props.emp.map(e => <li>{e.name}</li>)}
</ul>
</div>
)
}
}
Vos propriétés next et emplist sont directement dérivables de vos accessoires et vous n’avez donc pas besoin d’elles. Vous pouvez le faire de la manière suivante
import React,{Component} from 'react'
export default class Emp extends Component{
render(){
const { emp } = this.props;
if(!emp || emp.length === 1)
return <div>name not found</div>
else {
return (
<div>
<br/> <p>The list is here</p>
<ul>
{emp.map(e=>{return <li>{e.name}</li>});}
</ul>
</div>
)
}
}
}
Toutefois, dans les cas où vous faites ce qu'il faut pour prendre des décisions très complexes en fonction d'accessoires, une combinaison de componentWillReceiveProps
et componentDidMount/componentWillMount
est le bon endroit pour le faire.