在 React Native 中将状态从子组件传递到父组件

Posted 2023-02-23

【中文标题】在 React Native 中将状态从子组件传递到父组件

【英文标题】：Pass state from child to parent component in React Native

【发布时间】：2017-12-06 03:28:42

【问题描述】：

我的应用程序有一个设置屏幕（子组件），您可以在其中更改有关您自己的信息，我正试图让它在我的应用程序的配置文件屏幕（父组件）上呈现。因此，个人资料屏幕会显示您的信息，如果您想更改任何信息，请在设置中进行。现在，我在设置屏幕中所做的任何更改都会显示在 Firebase 中，但如果我返回配置文件屏幕，则不会呈现设置更改。当然，如果我关闭应用程序并重新加载它，更改将会在那里，因为设置的更改正在注册到 firebase；但是，状态不会从子组件传递到父组件。有人对如何将状态从设置（子）组件传递到配置文件（父）组件有任何建议吗？

【问题讨论】：

是那些不同的屏幕设置和配置文件还是两者都在一个屏幕上？

@forrest，有一篇很棒的文章解释了您面临的问题。我会说你应该阅读that。

@SagarKhatri 它们是 2 个独立的屏幕

@milkersarac 好文章！谢谢

【参考方案1】：

在尝试了几种不同的选项后，我们决定实施 Redux 来管理我们应用中的状态。我们的导航很难做到这一点，但现在一切都已设置好，我想说这是非常值得的努力。还有其他的状态管理解决方案，比如我们研究过的 MobX，但决定使用 Redux，因为它适合我们的导航布局。

【参考方案2】：

您应该研究一个状态管理模块，例如 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>
    );
  

【参考方案3】：

你可以试试 redux，每当你在 redux store 中更改数据时，它都会通过 props 将数据存储在 state 中。

另一种想法是，将 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>
    

【讨论】：

我认为这会抛出一个错误，传递给孩子的道具应该是'this.updateState.bind(this)'。请验证并更新答案

我要试试redux。我可能需要一周的时间才能开始

Redux 是这种情况的捷径，解决了你的问题，我也会用它。然而，应该承认，如果您是 react 生态系统的新手，将 redux 插入您的项目并不容易，但一旦插入，它肯定会很有趣。最后猜猜看，还有一篇必须阅读的文章，you-might-not-need-redux。

我的渲染功能遇到了这个问题，谁能帮帮我？ React Native 错误：未定义不是对象（正在评估 'Object.keys(dataBlob[sectionID])'）