如何更改和跟踪数组中每个元素的布尔状态答案

【问题标题】：How to change change and track boolean state of each element in an array如何更改和跟踪数组中每个元素的布尔状态
【发布时间】：2021-11-12 13:13:06
【问题描述】：

我试图做到这一点，以便当在 react native 中按下 TouchableHighlight 时，它会从一种颜色变为另一种颜色。我的状态设置为 false 并在按下按钮时更改。但是，这会更改地图中所有元素的颜色，而不是单独更改每个项目的颜色。有没有办法独立更新每个元素的状态？这是我的代码：

function OnboardingVibes() {
  const [pressed, setPressed] = useState(false);
  return (
      <View style={{marginTop: 40}}>
        <Text style={{fontSize: 22, color: '#FFF', marginBottom: 16}}>Vibes</Text>
        <View style={styles.buttonContainer}>
          {vibes.map((vibe) => {
            return (
                <TouchableHighlight onPress={() => setPressed(true)} style={{backgroundColor: pressed ? '#DDD' : '#4D2C5B', margin: 4, borderRadius: 4}} key={`vibe-${vibe}`}>
                  <Text style={styles.vibeButton}>{vibe}</Text>
                </TouchableHighlight>
            )
          })}
        </View>
      </View>
  );
}

【问题讨论】：

标签： javascript arrays reactjs typescript react-native

【解决方案1】：

const [pressed, setPressed] = useState(vibes.map(e=>false));
{vibes.map((vibe, index) => {
           return (
               <TouchableHighlight onPress={() => {
let new_Pressed =vibes.map(e=>false)
    new_pressed[index]=true;
setPressed(new_pressed);
}} 
style={{backgroundColor: pressed[index] 
                ? '#DDD' 
                : '#4D2C5B',
                margin: 4, borderRadius: 4}} key={`vibe-${vibe}`}>
                 <Text style={styles.vibeButton}>{vibe}</Text>
               </TouchableHighlight>
           )
         })}

【讨论】：

【解决方案2】：

一种方法是向下移动状态，这样您就可以拥有单独的状态。当顶层状态为true时，所有子组件都会收到相同的状态。

function TouchableVibe({vibe}) {
  const [pressed, setPressed] = useState(false);

  return (
    <TouchableHighlight
      onPress={() => setPressed(true)}
      style={{
        backgroundColor: pressed ? "#DDD" : "#4D2C5B",
        margin: 4,
        borderRadius: 4,
      }}
    >
      <Text style={styles.vibeButton}>{vibe}</Text>
    </TouchableHighlight>
  );
}

function OnboardingVibes() {
  return (
    <View style={{ marginTop: 40 }}>
      <Text style={{ fontSize: 22, color: "#FFF", marginBottom: 16 }}>
        Vibes
      </Text>
      <View style={styles.buttonContainer}>
        {vibes.map((vibe) => (
          <TouchableVibe key={`vibe-${vibe}`} vibe={vibe} />
        ))}
      </View>
    </View>
  );
}

【讨论】：

这很好用，我唯一的问题是我如何将每个 vibe 添加到一个 vibes 数组中？我试图在 touchableVibes 上添加一个状态数组，但这似乎不起作用？任何帮助都很棒！
如果您在TouchableVibe 中有数组状态，那么您只会跟踪一个，所以现在您必须提升该数组状态，然后将处理程序传回TouchableVibe。想象一下这棵树OnboardingVibe -> TouchableVibe，内层（右）的状态不能被父级（左）看到。但是左边可以看到右边。

【解决方案3】：

不要将布尔值传递给状态，而是传递id/vibe，然后在map 内的条件逻辑中，您可以确定该单个项目是否与您单击的项目相同。

function OnboardingVibes() {
  const [pressed, setPressed] = useState('');
  return (
      <View style={{marginTop: 40}}>
        <Text style={{fontSize: 22, color: '#FFF', marginBottom: 16}}>Vibes</Text>
        <View style={styles.buttonContainer}>
          {vibes.map((vibe) => {
            return (
                <TouchableHighlight onPress={() => setPressed(vibe)} style={{backgroundColor: pressed === vibe ? '#DDD' : '#4D2C5B', margin: 4, borderRadius: 4}} key={`vibe-${vibe}`}>
                  <Text style={styles.vibeButton}>{vibe}</Text>
                </TouchableHighlight>
            )
          })}
        </View>
      </View>
  );
}

【讨论】：

感谢您的回复，这可行，但是一次只能用于一个，我喜欢为每种氛围都这样做，因此最终会突出显示其中的一些而不是一次突出显示。这样做最好怎么做？