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

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

Answer 2

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

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

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

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

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

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

当外部数据发生变化时更新 React 组件

2 个答案: