web-dev-qa-db-ja.com

プロパティが変更されたときにReactコンポーネントを再レンダリングする

プレゼンテーションコンポーネントをコンテナコンポーネントから分離しようとしています。 SitesTableとSitesTableContainerがあります。コンテナは、現在のユーザーに基づいて適切なサイトを取得するためにreduxアクションをトリガーします。

問題は、コンテナコンポーネントが最初にレンダリングされた後、現在のユーザーが非同期にフェッチされることです。これは、コンテナコンポーネントが、componentDidMountに送信するデータを更新するSitesTable関数のコードを再実行する必要があることを知らないことを意味します。 props（user）の1つが変更された場合、コンテナコンポーネントを再レンダリングする必要があると思います。これを正しく行うにはどうすればよいですか？

class SitesTableContainer extends React.Component {
    static get propTypes() {
      return {
        sites: React.PropTypes.object,
        user: React.PropTypes.object,
        isManager: React.PropTypes.boolean
      }
     }

    componentDidMount() {
      if (this.props.isManager) {
        this.props.dispatch(actions.fetchAllSites())
      } else {
        const currentUserId = this.props.user.get('id')
        this.props.dispatch(actions.fetchUsersSites(currentUserId))
      }  
    }

    render() {
      return <SitesTable sites={this.props.sites}/>
    }
}

function mapStateToProps(state) {
  const user = userUtils.getCurrentUser(state)

  return {
    sites: state.get('sites'),
    user,
    isManager: userUtils.isManager(user)
  }
}

export default connect(mapStateToProps)(SitesTableContainer);
reactjsreduxreact-redux
54
David

componentDidUpdateメソッドに条件を追加する必要があります。

例では、 fast-deep-equal を使用してオブジェクトを比較しています。

import equal from 'fast-deep-equal'

...

constructor(){
  this.updateUser = this.updateUser.bind(this);
}  

componentDidMount() {
  this.updateUser();
}

componentDidUpdate(prevProps) {
  if(!equal(this.props.user, prevProps.user)) // Check if it's a new user, you can also use some unique property, like the ID  (this.props.user.id !== prevProps.user.id)
  {
    this.updateUser();
  }
} 

updateUser() {
  if (this.props.isManager) {
    this.props.dispatch(actions.fetchAllSites())
  } else {
    const currentUserId = this.props.user.get('id')
    this.props.dispatch(actions.fetchUsersSites(currentUserId))
  }  
}

フックの使用（React 16.8.0 +）

import React, { useEffect } from 'react';

const SitesTableContainer = ({
  user,
  isManager,
  dispatch,
  sites,
}) => {
  useEffect(() => {
    if(isManager) {
      dispatch(actions.fetchAllSites())
    } else {
      const currentUserId = user.get('id')
      dispatch(actions.fetchUsersSites(currentUserId))
    }
  }, [user]); 

  return (
    return <SitesTable sites={sites}/>
  )

}

比較するプロップがオブジェクトまたは配列の場合、 useDeepCompareEffect の代わりに useEffect を使用する必要があります。

74
QoP

ComponentWillReceiveProps()は、バグと不整合のため、今後廃止される予定です。小道具の変更時にコンポーネントを再レンダリングするための代替ソリューションは、ComponentDidUpdate()およびShouldComponentUpdate()を使用することです。

ComponentDidUpdate()は、コンポーネントが更新されるたびに呼び出され、_ShouldComponentUpdate()がtrueを返す場合（ShouldComponentUpdate()が定義されていない場合は、デフォルトでtrueを返します）。

shouldComponentUpdate(nextProps){
    return nextProps.changedProp !== this.state.changedProp;
}

componentDidUpdate(props){
    // Desired operations: ex setting state
}

この同じ動作は、その中に条件ステートメントを含めることにより、ComponentDidUpdate()メソッドのみを使用して実現できます。

componentDidUpdate(prevProps){
    if(prevProps.changedProp !== this.props.changedProp){
        this.setState({          
            changedProp: this.props.changedProp
        });
    }
}

条件なしで、またはShouldComponentUpdate()を定義せずに状態を設定しようとすると、コンポーネントは無限に再レンダリングされます

14
ob1
componentWillReceiveProps(nextProps) { // your code here}

それがあなたが必要とするイベントだと思います。 componentWillReceivePropsは、コンポーネントが小道具を介して何かを受け取るたびにトリガーします。そこからチェックをして、やりたいことは何でもできます。

5
mr.b

私はこの answer を見て、それがあなたのやっていることに関連しているかどうかを確認することをお勧めします。あなたの本当の問題を理解しているなら、それはあなたの非同期アクションを正しく使用せず、新しいプロップでコンポーネントを自動的に更新するredux「ストア」を更新しているということです。

コードのこのセクション：

componentDidMount() {
      if (this.props.isManager) {
        this.props.dispatch(actions.fetchAllSites())
      } else {
        const currentUserId = this.props.user.get('id')
        this.props.dispatch(actions.fetchUsersSites(currentUserId))
      }  
    }

コンポーネントでトリガーされるべきではなく、最初のリクエストを実行した後に処理されるべきです。

redux-thunk からこの例を見てください：

function makeASandwichWithSecretSauce(forPerson) {

  // Invert control!
  // Return a function that accepts `dispatch` so we can dispatch later.
  // Thunk middleware knows how to turn thunk async actions into actions.

  return function (dispatch) {
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    );
  };
}

必ずしもredux-thunkを使用する必要はありませんが、このようなシナリオについて推論し、一致するコードを作成するのに役立ちます。

2
TameBadger

プロパティで変更されるKEY一意キー（データの組み合わせ）を使用でき、そのコンポーネントは更新されたプロパティで再レンダリングされます。

1
Rafi

使いやすい方法は次のとおりです。propが更新されると、コンポーネントが自動的に再レン​​ダリングされます。

render {

let textWhenComponentUpdate = this.props.text 

return (
<View>
  <Text>{textWhenComponentUpdate}</Text>
</View>
)

}
0
0x01Brain