React Native点击星级后背景未切换，星级联动选中失效求助

嘿，这问题我太熟啦！你遇到的是React状态更新的经典陷阱——直接修改原state的数组/对象，没有创建新的引用，导致React无法检测到状态变化，所以界面迟迟不更新。

问题根源 #

React的useState是通过引用对比来判断是否需要触发重渲染的。你现在的代码里，直接循环修改了holdStars数组里的元素，然后把同一个数组引用传给setHoldStars。在React眼里，这个数组和之前的是同一个，所以它会认为“状态没变化，不用更新界面”，哪怕你确实修改了数组里的内容。

解决方案：创建新的状态引用 #

我们需要修改handleStarClicked函数，永远不要直接修改原state，而是创建一个新的数组/对象来更新状态。这里有两种简单的实现方式：

方式1：使用map创建新数组（更简洁）

const handleStarClicked = (id) => {
  // 用map生成新数组，每个star都是新对象
  const updatedStars = holdStars.map((star, index) => ({
    ...star, // 复制原star的属性
    selected: index <= id // 更新selected状态
  }));
  setHoldStars(updatedStars);
}

方式2：先复制数组再修改（和你原代码逻辑更接近）

const handleStarClicked = (id) => {
  // 先通过展开运算符创建原数组的副本（新引用）
  const updatedStars = [...holdStars];
  for (let i = 0 ; i < updatedStars.length; i++) {
    // 每个star也要创建新对象，不要直接修改原对象
    updatedStars[i] = {
      ...updatedStars[i],
      selected: i <= id
    };
  }
  setHoldStars(updatedStars);
}

额外优化：初始状态的函数式初始化 #

为了避免组件每次渲染都创建新的初始数组，建议用函数式初始化state：

const [holdStars, setHoldStars] = useState(() => [
  { id: 0, selected: false },
  { id: 1, selected: false },
  { id: 2, selected: false },
  { id: 3, selected: false },
  { id: 4, selected: false }
]);

修正后的完整代码 #

import { useState, FlatList, Pressable } from 'react';
import Icon from 'react-native-vector-icons/AntDesign';

// 你的组件
const StarRating = () => {
  const [holdStars, setHoldStars] = useState(() => [
    { id: 0, selected: false },
    { id: 1, selected: false },
    { id: 2, selected: false },
    { id: 3, selected: false },
    { id: 4, selected: false }
  ]);

  const handleStarClicked = (id) => {
    const updatedStars = holdStars.map((star, index) => ({
      ...star,
      selected: index <= id
    }));
    setHoldStars(updatedStars);
  }

  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>
      }
    />
  );
};

export default StarRating;

这样修改后，每次点击星星都会生成新的数组和对象引用，React能正确检测到状态变化，界面就会跟着更新啦！

内容的提问来源于stack exchange，提问作者Vigilante