單擊它並使用三元后視圖背景不會改變

Question

所以我顯示 5 顆星。 未選中時默認為灰色。 當我點擊星星時，我希望視圖的背景顏色發生變化，但點擊它后它並沒有改變。 此外，如果我單擊星號 3，我希望星號 3 之前的星號也更改背景顏色。 但沒有任何效果。

當 handleStarClicked 運行時，我使用 console.log 查看更改列表並保存更改但不確定發生了什么。 真的很感激一些幫助，請

 const stars = [{ id: 0, selected: false }, { id: 1, selected: false }, { id: 2, selected: false }, { id: 3, selected: false }, { id: 4, selected: false }]; const [holdStars, setHoldStars] = useState(stars); const handleStarClicked = (id) => { for (let i = 0; i < holdStars.length; i++) { if (i <= id) { holdStars[i].selected = true; } else { holdStars[i].selected = false; } } setHoldStars(holdStars); } return ( <FlatList data={holdStars} horizontal scrollEnabled={false} renderItem={({ item }) => <Pressable onPress={() => handleStarClicked(item.id)} className="ml-1 p-1 rounded-xl items-center justify-center" style={{ backgroundColor: item.selected? "#6ECCAF": "#CCCCCC" }}> <Icon name="star" type="AntDesign" size={32} color="white" /> </Pressable> } /> )

Answer 1

這里的問題是您直接在 handleStarClicked function 中修改 holdStars 數組，這是導致問題的原因。 嘗試這個：

const handleStarClicked = (id) => {
  const newHoldStars = [...holdStars]; // create a new copy of the holdStars array
  for (let i = 0 ; i < newHoldStars.length; i++) {
    if (i <= id) {
      newHoldStars[i].selected = true;
    } else {
      newHoldStars[i].selected = false;
    }
  }
  setHoldStars(newHoldStars);
}