Question

我有一个应用程序，允许用户扫描并连接到BLE设备。如果用户点击扫描结果，则我希望在连接进行期间在设备旁边显示微调框。

我正在使用Redux来跟踪发现和连接的设备。 App的主要组件与redux-react连接，并将状态的相关位传递给其子级。

这些子项之一是扫描结果列表，该列表又将一个设备传递到其每个条目。扫描列表项如下所示：

class DeviceListItem extends Component{
render = () => {
    return <TouchableOpacity onPress={this.props.onPress}>
        <Card>
            <View style={{justifyContent: "space-between", flexDirection: "row", flex:1, width:"100%", alignItems: this.props.item.pendingActions !== 0?"flex-start":undefined}>
                <Text>{this.props.item.name}</Text>
                <ActivityIndicator animating= {this.props.item.pendingActions !== 0}  color={Colors.accent} size="small"/>
            </View>
        </Card>
    </TouchableOpacity>
}
}

现在，以View组件的样式，您可能会注意到以下特殊代码段：

 alignItems: this.props.item.pendingActions !== 0?"flex-start":undefined

由于某种原因，当设备状态改变时，使微调框显示出来是必需的。似乎为了使微调器显示在状态更新上，是使父视图的样式取决于状态。更改哪个属性似乎无关紧要，但是需要以某种方式进行更改，以使微调框受更新影响。

有人对这里发生的事情有任何想法吗？我对Redux和React Native还是很陌生，所以有可能我在这里滥用了一些东西，但这对我来说似乎很奇怪。

Answer 1

在更新props时，组件并不了解道具更改。当您更新父级状态且道具已更改时，它将触发父级的渲染，这还将重新渲染您正在谈论的子级。

在更新prop值时，如果不触发渲染，则子级将不会重新渲染。

要了解道具更改，您必须使用componentDidUpdate。

一个例子是：

componentDidUpdate=(prevProps)=>{
   if (prevProps!==this.props)
       this.setState({propsChanged:!this.state.propsChanged})
}

要使用上面的示例，您必须定义一个名为propsChanged的状态变量。

希望这可以帮助您理解问题并找到适合您的解决方案！

状态更新仅在影响父母风格时才影响组件

1 个答案: