Javascript 反应本机-动态状态？或等效解

我正在尝试构建一个显示报警代码的视图-这些代码以数据数组的形式传递给应用程序，如下所示：

报警：[{位置：正门，代码：123456}，{位置：后门，代码：456789}]

对于每个实例，可能有1个或多个代码

我通过此地图功能显示代码：

return this.state.alarmsOnSite.map((data, index) => {

  return (
    <View key={index}>
    <Text style={GlobalStyles.SubHeading}>
      Alarm: {data.location}
    </Text>

      <View style={[GlobalStyles.GreyBox, {position:'relative'}]}>
        <Text style={GlobalStyles.starText}>
        ********
        </Text>

        <TouchableOpacity
          style={CheckInStyles.eyeballImagePlacement}
        >
          <View style={CheckInStyles.eyeballImage} >
            <Image
              style={CheckInStyles.eyeballImageImage}
              source={require('../images/icons/ico-eyeball.png')}
            />
          </View>
        </TouchableOpacity>
    </View>
  </View>
  )
});

---

简报中说，按下可触摸不透明按钮时，星星应该切换到只显示代码5秒钟。我想这对state来说很容易——我可以在两个文本对象上切换一个显示类来隐藏/显示星星或代码。但是，如果我不知道会有多少报警代码，我如何在固定状态下执行此操作？我可以使用动态状态吗？是否存在这种情况？或者有人对这种情况下的最佳方法有其他想法吗？

设置状态时，请在对象中包含一个属性，以确定它们是否显示：

this.state = {
    alarmsOnSite: whereverYoureGettingTheDataNow.map(obj => ({...obj, showing: false})),
    // ...
};

然后，为了响应触摸，将该标志设置为true，然后在五秒钟后返回false。例如，如果触摸屏本身在触摸屏上，对不起，我不知道该组件：

  <View style={[GlobalStyles.GreyBox, {position:'relative'}]}>
    <Text style={GlobalStyles.starText}>
    {data.showing ? data.code : "********"}
    </Text>

    <TouchableOpacity
      style={CheckInStyles.eyeballImagePlacement}
      onTouch={() => this.showAlarm(data)}
    >
      <View style={CheckInStyles.eyeballImage} >
        <Image
          style={CheckInStyles.eyeballImageImage}
          source={require('../images/icons/ico-eyeball.png')}
        />
      </View>
    </TouchableOpacity>
</View>

…或类似的

下面是一个简化的示例：

constwhereyouregettingtedatanow=[{位置：正门，代码：123456}，{位置：后门，代码：456789}]； 类示例扩展了React.Component{ 构造器{ 超级作物； 此.state={ alarmsOnSite:wherever您设置了tanow.mapobj=>{…obj，显示：false}， // ... }; } 显示报警{ 让updated=null； 这是我的国家 {alarmsOnSite}=>{ alarmsOnSite:alarmsOnSite.mapa=>{ 如果a==报警{ return updated={…a，显示：true}； } 返回a； } }, => { 设置超时=>{ this.setState{alarmsOnSite}=>{ alarmsOnSite:alarmsOnSite.mapa=>a==已更新？{…a，显示：false}:a }; }, 5000; } ; } 渲染{ 回来 {this.state.alarmsOnSite.mapdata，索引=> {data.location} this.showAlarmdata}> {data.showing？data.code:******} } ; } } ReactDOM.render、document.getElementByIdroot；

---

Brilliant-非常感谢-将在早上实施，如果一切正常，返回给您打勾。。再次感谢。

showAlarm(alarm) {
    let updated = null;
    this.setState(
        ({alarmsOnSite}) => ({
            alarmsOnSite: alarmsOnSite.map(a => {
                if (a === alarm) {
                    return updated = {...a, showing: true};
                }
                return a;
            })
        }),
        () => {
            setTimeout(() => {
                this.setState(({alarmsOnSite}) => ({
                    alarmsOnSite: alarmsOnSite.map(a => a === updated ? {...a, showing: false} : a)
                }));
            }, 5000);
        }
    );
}