React Native，State 发生变化，但 JSX 条件渲染没有更新 UI

Question

您好，提前感谢您的宝贵时间！

我正在努力解决一个我以前没有遇到过的小问题，React 没有根据检查 function 呈现 UI 元素。 基本上，我想要做的是一个多选过滤器菜单，当单击一个选项时，它旁边的点会变为红色。

为此，我将 append 每个选项的值添加到数组中，并使用 array.sort 验证何时添加（值被推送到 FilterList）和删除（值从 FilterList 中弹出）

检查过滤器 function 运行正常，并且在记录 state 时，它确实在更新阵列时按预期工作。

然而，运行 checkfilter 以在更大的圆圈内渲染额外的红点的 JSX 代码，不幸的是没有。

此外，当屏幕刷新时，UI 会正常更新，每点击一个选项，现在都会显示前面提到的红点。

为什么会这样？ 我已经尝试了几个钩子、JSX 方法、使用导入的组件以及更多我什至不记得的东西，但 UI 不会奇怪地更新。

您可以在下面找到代码片段。 请记住，这是一个平面列表组件的渲染 function

    const checkFilter = useCallback((element) => {
    return filterList?.some((el: any) => (el == element))
}, [filterList])
const removeFilter = useCallback((cat) => {
    let temparr = filterList
    var index = temparr?.indexOf(cat);
    if (index > -1) {
        temparr?.splice(index, 1);
    }
    setFilterList(temparr)
}, [filterList])
const addFilter = useCallback((cat) => {
    let temparr = filterList;
    temparr.push(cat);
    setFilterList(temparr)
}, [filterList])

const renderFilter = useCallback((item) => {
    return (

        <Pressable
            onPress={() => {
                checkFilter(item?.item) ? removeFilter(item?.item) : addFilter(item?.item);
                console.log(filterList)
            }}
            style={styles.modalOptionWrapper}
        >
            <Text style={styles.modalOptionTitle(checkFilter)}>{item?.item}</Text>
            <View style={styles.modalOptionRowRight}>
                <View style={styles.radioBtn}>
                    {checkFilter(item?.item) ?
                        <View style={styles.radioBtnBullet} />
                        :
                        null
                    }
                </View>
            </View>

        </Pressable>

    )
}, [filterList])

Answer 1

这可能不是正确的答案，但试试这个。 当我说简单的基本代码时，就像这样。

const ListItems = () => {
  const [filterList, setFilterList] = React.useState([]); // must be array

  const checkFilter = filterList?.some((el) => el === element);
  const removeFilter = useCallback(
    (cat) => {
      // not updating new state, just useing previous state
      setFilterList((prev) => [...prev].filter((el) => el !== cat));
      // used spread iterator
    },
    [] // no need dependency
  );
  const addFilter = useCallback((cat) => {
    // used spread indicator
    setFilterList((prev) => [...prev, cat]);
  }, []);

  const renderFilter = useCallback((item) => {
    // just checking our codes is right with basic elements
    // it may be 'undefined'
    return <Text>{JSON.stringify(item)}</Text>;
  }, []);

  return filterList.map(renderFilter);
};