web-dev-qa-db-fra.com

Comment passer des données d'un parent à un enfant dans react.js

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>
            )
    }
}

javascriptreactjsredux
6
pKay

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>
        )
    }
}
5
HimanshuArora9419

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>
            )
    }
}

0
Brijesh Bhakta

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.

0
Shubham Khatri