react.jsでparentからchildへデータを渡す方法

Question

私は1つの子を持つ親コンポーネントを持っています。私は小道具を通してデータを渡すことで子供を更新しています。最初は正常に動作しますが、ボタンをクリックしてsetStateを使用して状態を更新すると、子はsetStateが終了するまでに古い値でレンダリングされます。子でcomponentWillReceivePropsを使って解決しましたが、これは正しい方法ですか？

以下のコードでは、filterResults関数でsetStateを実行すると、Emplistコンポーネントは更新されません。

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

Answer 1

あなたは親から子へ渡したい場合は、小道具を使用して渡すことができますし、tは逆の操作を行うとのWAN場合は、一つの関数を渡すことができますよりも、親から子へと何かを送り、この渡された関数を使って何かを親に送り返すよりも。

子供は問題はあなたが良い習慣ではありませんこれに値を代入していることである。この

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

Answer 2

ようになります。この

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

親のようになります。 React hereで変数を宣言する場所を確認してください。

複雑な操作を行うためにプロップを使用していない場合。これはうまくいくはずです。

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

Answer 3

あなたの次のとEMPLISTクラスのプロパティは、あなたの小道具から誘導直接であり、したがって、あなたは実際にそれらを必要としません。あなたが小道具に基づいて、本当に複雑な意思決定を行うために何をするときは、例に

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

---

しかし、次のようにそれを行うことができ、componentWillReceivePropsとcomponentDidMount/componentWillMountの組み合わせは、それを行うための適切な場所です。