如何更改数组和元素的平面列表的背景颜色？

Question

我想根据array ans改变flatlist item的背景颜色但是不能改变 flatlist 的背景颜色仅第一项背景颜色已更改

    const ans = [1, 3, 5];
    const [dataSource, setDataSource] = useState([]);

    useEffect(() => {
    let items = Array.apply(null, Array(5)).map((v, i) => {
        return {
            id: i + 1,
        };
    });
    setDataSource(items);
    }, []);
   
    const renderItem = ({ item, index }) => {
        const backgroundColor = item.id == ans[index] ? '#00b300' : "#F5FCFF"; \ here is main code
       
        return (
            <TouchableWithoutFeedback onPress={() => getItem(item)}>
                <View style={{ ...styles.viewStyle, backgroundColor: backgroundColor, flex: 1 / 5, 
                             height: 40, }} >
                    <Text style={{ ...styles.cardView_Text, color: '#000' }} > {item.id} </Text>
                </View>
            </TouchableWithoutFeedback>
        );
    };

    const getItem = (item) => {
        // alert('Id: ' + item.id);
    };

   <FlatList
    data={dataSource}
    showsHorizontalScrollIndicator={false}
    renderItem={renderItem}
    keyExtractor={(item, index) => index.toString()}
    extraData={selectedId}
    numColumns={5}
    initialNumToRender={2}
    maxToRenderPerBatch={1}
    windowSize={7}
  />

Answer 1

你的情况下 quesno 是什么？我认为您使用的是 useState 而不是 useEffect。

useState(() => {..}) => useEffect(() => {..})

如果您仍想使用 === 并让代码正常工作，请将函数更改为

const renderItem = ({ item, index }) => {
        const backgroundColor = item.id === ans[index];
       
        return (
            <TouchableWithoutFeedback onPress={() => getItem(item)}>
                <View style={{ ...styles.viewStyle, backgroundColor: backgroundColor  ? '#00b300' : "#F5FCFF" , flex: 1 / 5, 
                             height: 40, }} >
                    <Text style={{ ...styles.cardView_Text, color: '#000' }} > {item.id} </Text>
                </View>
            </TouchableWithoutFeedback>
        );
    };

Answer 2

=== 是 JavaScript 中的严格相等比较运算符，对于不属于相似类型的值，return 为 false。此运算符执行类型转换以获得相等性。如果我们使用 === 将 2 与 "2" 进行比较，那么它将 return 一个错误值。

尝试将其更改为 == 将解决您的问题。还有一件事请重新检查 useState() 和 useEffect()。改成useEffect(), 我已经添加了一个演示link，请看一下Link

如何更改数组和元素的平面列表的背景颜色？

how to change background color of flatlist for array ans elements?

react-native

flatlist