javascript - React State无法按预期工作，有没有更好的方法？

我正在努力使自己回避一些反应状态工作，特别是处理状态项中的阵列。
在我的测试中，我有一组项目，每个项目都有一个ID和一个为这些项目加上星号的按钮。如果该项已加星标，则ID将从状态数组中删除。
这是我的代码，但由于某种原因，它何时起作用是非常零星的。

  const [starred, setStarred] = useState(null);
  const [starredArray, setStarredArray] = useState([]);

  useEffect(() => {
    if (starred !== null) {
      if (starredArray.includes(starred)) {
        const newArray = starredArray;
        const index = newArray.indexOf(starred);
        if (index > -1) {
          newArray.splice(index, 1);
          setStarredArray(newArray);
        }
      } else {
        setStarredArray([...starredArray, starred]);
      }
      setStarred(null); // reset for next
    }
  }, [starred, setStarred]);

  useEffect(() => {
    console.log("starredArray");
    console.log(starredArray);
  }, [starredArray, setStarredArray]);

然后我有一个按钮元素来触发每个星星 Action ，在许多元素上看起来像这样

  <TouchableOpacity
    style={styles.previewStar}
    onPress={() => setStarred(previewId)}
  >
    <Icon name="star" size={20} color="dodgerblue" />
  </TouchableOpacity>

我在这个方向上走错了方向吗？

最佳答案

const newArray = starredArray;您正在使用此方法更改原始数组，请参见以下内容:

const a = [1,2,3];
const b = a;

b.splice(1,1);

console.log(a);
console.log(b);

鉴于您所拥有的我想像的都是Ids，它们应该是:const newArray = [...starredArray];移除之前，例如:

const a = [1,2,3];
const b = [...a];

b.splice(1,1);

console.log(a);
console.log(b);

或者，您可以:setStarredArray(starredArray.filter(item => starred !== item));