外部数据更改时更新 React 组件

Question

假设当我的 React 应用程序运行时，它连接到一个 MQTT 代理，在该代理中数据被发送到应用程序。然后将该数据存储在一个类似于以下内容的对象中：

var data = {
      shoeColor1: 'blue',
      shoeColor2: 'red'
      shoeColor3: 'orange'
}

以下 React 组件显示该数据。

import React, {Component} from 'react';
import { Button } from 'react-native';

export default class Example extends Component {
    constructor(props) {
        super(props)

        this.state = {
            buttonText: `Shoe color is ${this.props.color}`
        }
    }

     render() {
         return (
            <Button title={this.state.buttonText}/>
         )
     }
}

并且会像这样使用：

<Example color={data['shoeColor1']}/>
<Example color={data['shoeColor2']}/>

data 对象会不时发生变化，并且每次发生变化时，显示数据的按钮也会发生变化。我还需要将 data 对象保留在 Example 组件之外，因此我不能让这些更改在内部发生。我真正想要的是一种在 data 对象从外部发生变化时更新 React 组件的方法，但我不确定如何实现这一点。如果我将 state 或 props 设置为组件中的某个值，并且这些值在外部发生更改，则该组件将不会重新渲染。

Answer 1

这些是实现此功能的以下步骤。

1. 在父组件中创建状态对象。它将保持颜色的初始状态。
2. 现在，当 MQTT 将数据发送到您的客户端应用程序时，使用更新的对象设置状态。
3. 将该状态对象传递给示例组件。

如果你通过类组件使用状态，那么它会是这样的。

<Example color={this.state.data['shoeColor2']}/>

如果你使用的是 useState 钩子，那么它会是一样的。

<Example color={data['shoeColor2']}/>

Answer 2

我建议将data 保留为Example 的父组件中的一个状态，这样当data 更改时，它会触发父组件中的重新渲染，然后父组件应该重新渲染其子组件也是。