当外部数据发生变化时更新 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

我建议将 data 作为 Example 的 parent 组件中的一个状态，这样当 data 发生变化时，它会触发 re-render 在 parent 中，然后 re-render 它的 children 也应该如此。

Answer 2

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

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

如果您通过 class 组件使用状态，那么它将是这样的。

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

并且如果您使用的是 useState 钩子，那么它将是相同的。

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

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

Updating React Component When Outside Data Changes

javascript

reactjs

react-native

react-props

react-component