Question

我有一个组件，其中Text组件的值没有被更新，即使Render()函数中显示了更新。

组件嵌套如下：

render() {
    const myValue = this.state.myValue
    console.warn('Value: ' + myValue)
    return <View>
        ...
        <View>
             <Image>
                 <Text>{myValue}</Text>
             </Image>
        </View>
        ....
    </View>
}

问题是console.warn显示值正在变化并且正在设置常量值。但是<Text>组件本身没有更新。 <Text>组件包含在<Image>组件中，因为它是此部分的背景图像。在我的情况下，Render()方法每秒调用四次，因为我们有一个不断接收更新的计时器栏。

为什么<Text>组件无法按预期更新？

注意：如果我将<Text>组件更改为<Image>，<View>组件会更新，但此部分需要背景图像。

Answer 1

使用const时，它向React说明指针没有改变，渲染将无效。

尝试将其直接连接到状态，如下所示：

render() {
    console.warn('Value: ' + this.state.myValue)
    return <View>
        ...
        <View>
             <Image>
                 <Text>{this.state.myValue}</Text>
             </Image>
        </View>
        ....
    </View>
}

Answer 2

我认为造成此问题的原因是，图像组件被缓存，并且对this.setState({myValue: 'text'})的调用错过了刷新图像和所有包含的组件（在本例中为Text组件）的操作。在致电this.forceUpdate()之后致电setState()对我有用。

此外，不确定您使用的是哪个版本的React，但是您还可以看到此答案here，有关将其他组件放置在react-native中的ImageComponent中。

React-Native中的文本组件值不会更改

2 个答案: