小道具として更新された状態を渡す

Question

可能であればこの問題を見ることができるかどうかは、私は比較的新しいものです。私はクリックイベントでAPIにajax呼び出しを行い、結果を'SearchButtons'コンポーネントの状態に格納しています。

状態は、次に、小道具を介して子コンポーネントに渡されます。ただし、子コンポーネントの小道具（SearchForm）は親コンポーネントの以前の状態と同じで、ユーザーがいずれかのボタンをクリックすると更新されません。

小道具が子コンポーネントに送信される前に、おそらくコンポーネントを更新する方法があるのでしょうか？

import React from 'react'; 
import SearchForm from './SearchForm' 

class SearchButtons extends React.Component { 
    constructor(){ 
    super(); 
    this.state = { 
     data: {} 
    } 
    } 

    update(event){ 
    $.ajax({ 
     url: 'http://example/api/' + event.target.value, 
     dataType: 'json', 
     cache: false, 
     success: function(data) { 
     this.setState({ data: data }) 
     }.bind(this) 
    }); 
    } 

    render() { 
    return (
     <div> 
     <button type="button" value="people" onClick={this.update.bind(this)} className="btn btn-primary">People</button> 
     <button type="button" value="car" onClick={this.update.bind(this)} className="btn btn-primary">Car</button> 
     <button type="button" value="planet" onClick={this.update.bind(this)} className="btn btn-primary">Planet</button> 
     <SearchForm data={this.state.data} /> 
     </div> 
    ) 
    } 
} 

export default SearchButtons 

import React from 'react'; 

class SearchForm extends React.Component { 

    componentWillReceiveProps(){ 
    console.log(this.props.data); 
    } 

    render(){ 
    return (
     <form className="form-inline"> 
     <div className="form-group"> 
      <label className="sr-only" for="exampleInputEmail3"></label> 
      <input type="text" className="form-control" placeholder="Enter text..." /> 
     </div> 
     <button type="submit" className="btn btn-default">Search</button> 
     </form> 
    ) 
    } 
} 

export default SearchForm 

Answer 1

componentWillReceivePropsの下SearchFormコンポーネントの例を参照してください、あなたは現在小道具、ないものを見ているthis.state.propsをロギングすることでので、最初の引数として次小道具を受け取ります受け取っている。

は、このような次のものログインしてください：もちろん

componentWillReceiveProps(nextProps){ 
    console.log(nextProps.data); 
} 

を、あなたはまた、新しい小道具が後、彼らは代わりに（または一緒にcomponentDidUpdateライフサイクルメソッドを呼び出すことによって更新されているされているかどうか確認することができます、componentWillReceiveProps）あなたは、両方の手順を監視する場合：あなたが詳細をお知りになりたい場合は

componentDidUpdate(prevProps, prevState) { 
    console.log(this.props.data); 
} 

は見lifecycle methodsを持っていこう！

Answer 2

正しく動作しているかのように見えますが、JSXのプロップからデータをレンダリングすると、期待通りにデータが更新されます。

componentWillRecievePropsはライフサイクルメソッドとして非常に意味があり、コンポーネントは小道具を受け取りますがまだ持っていません。あなたがthis.propsを記録すると、古い小道具が見えます。これは非常に簡潔コンポーネントのライフサイクルの各段階を分解し、それぞれの方法がどのように動作するかを示します非常に良い記事です

componentWillReceiveProps(nextProps) { 
    console.log('new props: ', nextProps); 
} 

の更新プログラムを確認するために、次の小道具をログ：

http://busypeoples.github.io/post/react-component-lifecycle/