reactjs - 反应原生重新渲染没有按预期工作

问题描述

希望你们在这个艰难的时刻都做得很好。

所以我是一个反应原生的新手，我正在尝试构建我的第一个游戏，它是滑动点击游戏，它背后的主要思想是我每秒有 30 个按钮，只有一个按钮处于活动状态，用户必须点击那个特定的一个，如果他点击了错误的一个，他的失败尝试就会增加一个。

所以我做的是以下内容：

export default function App() {
const [count, setCount] = useState(30);
const [random, setRandom] = useState(Math.floor(Math.random() * count));
const [data, setData] = useState([]);

useEffect(() => {
let arr = [];

for (let index = 0; index < count; index++) {
  arr[index] = index;
}

setData(arr);

return () => {
  //cleanup
};
}, [count]);

useEffect(() => {
const inter = setInterval(() => {
  setRandom(Math.floor(Math.random() * count));
}, 1000);

return () => {
  clearInterval(inter);
};
}, []);

const handlePress = (index) => {
alert("you pressed heart no #" + index);
};

return (
<View style={styles.container}>
  <Text>{random}</Text>
  <View style={styles.gameBody}>
    {data.map((i) => (
      <TouchableOpacity
        onPress={() => handlePress(i)}
        key={i}
        style={{ ...styles.gameItem, opacity: random === i ? 1 : 0.3 }}
      >
        <Text style={styles.gameTxt}>❤️</Text>
      </TouchableOpacity>
    ))}
  </View>
</View>
);
}

我期望这段代码做的是每秒随机数发生变化，因此随机按钮会改变它的不透明度，让用户感觉它是当前活动的但没有发生，那么我该如何修复这个呢？

提前谢谢你，别忘了待在家里。

标签： reactjsreact-native

它从一开始就在工作，我改变了这个

<Text style={styles.gameTxt}>❤️</Text>

至

<Text style={styles.gameTxt}>{random === i ? '❤️' : ''}</Text>

它奏效了

reactjs - 反应原生重新渲染没有按预期工作

问题描述

解决方案

推荐阅读