时间戳

首页 > 解决方案 > 多个状态在 React 中共享相同的视图或组件

javascript - 多个状态在 React 中共享相同的视图或组件

问题描述

是否可以说两个状态更新单个视图/组件？我们如何在反应中做到这一点？

this.state({
 dog: 'Canny'
 person: 'Brian'
})

<Text>{blank} likes beans.<Text>

例如，当 this.state.dog 更新时，该字段将显示“Canny likes beans”，当 this.state.person 更新时，该字段将显示“Brian likes beans”。有没有办法做到这一点？

编辑：这对于视图只有一个窗口来显示两种状态的更新的情况很有用，我知道您可以使用渲染功能来实现这一点，但是有没有一种简单的“第一原则”方式来做出反应?

标签： javascriptreactjsreact-native

解决方案

这应该通过引入另一个状态属性来完成personOrDog：

<Text>{this.state.personOrDog} likes beans.<Text>

没有直接的方法来检查以前的和当前的person以及dog要计算的状态personOrDog。以前和当前状态可用，shouldComponentUpdate但不鼓励使用setStateto 设置personOrDog，因为它滥用了这个生命周期钩子。

这意味着最好在更新状态的地方解决此问题：

this.setState({
  dog: 'Canny',
  personOrDog: 'Canny'
});

要使代码 DRYer，可以使用帮助程序来设置这些属性，例如：

const personOrDog = (key, value) => ({
  [key]: value,
  personOrDog: value
});

...

this.setState(personOrDog('dog', 'Canny'));

推荐阅读