web-dev-qa-db-ja.com

Reactネイティブで子から親コンポーネントに状態を渡す

私のアプリには、自分に関する情報を変更できる設定画面（子コンポーネント）があり、それをアプリのプロファイル画面（親コンポーネント）に表示しようとしています。したがって、プロファイル画面には情報が表示されます。情報を変更する場合は、設定で行います。現在、設定画面で行った変更はFirebaseに表示されますが、プロファイル画面に戻ると、設定の変更はレンダリングされません。もちろん、アプリを閉じてリロードすると、設定の変更がFirebaseに登録されるため、変更が反映されます。ただし、状態は子コンポーネントから親に渡されていません。設定（子）コンポーネントからプロファイル（親）コンポーネントに状態を渡す方法について誰かアドバイスがありますか？

react-nativeparent-childstate
7
Forrest

Reduxを試すことができます。reduxストアでデータを変更するたびに、小道具によってデータを状態で保存します。

他のアイデアは、setStateメソッドを子コンポーネントに渡すことです。

親

class Parent extends Component {
    updateState (data) {
        this.setState(data);
    }
    render() {
        <View>
            <Child updateParentState={this.updateState.bind(this)} />
        </View>
    }
}

子

class Child extends Component {
    updateParentState(data) {
        this.props.updateParentState(data);
    }

    render() {
        <View>
            <Button title="Change" onPress={() => {this.updateParentState({name: 'test'})}} />
        </View>
    }
}
15
Kishan Mundha

Reduxなどの状態管理モジュールを調べて、アプリで機能するかどうかを確認する必要がありますが、何もしなくても、次のようにすることで実現できます。

// ---------------------------------------------
// Parent:

class Parent extends React.Component {
  updateData = (data) => {
    console.log(`This data isn't parent data. It's ${data}.`)
    // data should be 'child data' when the
    // Test button in the child component is clicked
  }
  render() {
    return (
      <Child updateData={val => this.updateData(val)} />
    );
  }
}

// ---------------------------------------------
// Child:

class Child extends React.Component {
  const passedData = 'child data'
  handleClick = () => {
    this.props.updateData(passedData);
  }
  render() {
    return (
      <button onClick={this.handleClick()}>Test</button>
    );
  }
}
6
chapeljuice

いくつかの異なるオプションを試した後、アプリの状態を管理するためにReduxを実装することにしました。これは私たちのナビゲーションでは困難でしたが、すべてがセットアップされたので、努力する価値は十分にあったと思います。私たちが調べたMobXのような他の状態管理ソリューションがありますが、ナビゲーションレイアウトに適合するため、Reduxを使用することにしました。

1
Forrest