reactjs - 如何使用钩子和功能组件更改 flatList 中仅一项的样式

Question

我正在尝试使用钩子和功能组件来实现一个简单的 flalist。我希望单击的项目突出显示，如果有另一个项目已经突出显示，我希望它被取消突出显示。我得到一个虚拟数据，其中第一项已从对象数组中选择为

    const CategoriesData = [
  {
    id : "1",
    image : require("../images/pizza-icon.png"),
    title : "Pizza",
    selected : true,
  },
  {
    id : "2",
    image : require("../images/shrimp-icon.png"),
    title : "Sea Food",
    selected : false,
  },
  {
    id : "3",
    image : require("../images/soda-icon.png"),
    title : "Drinks",
    selected : false,
  },
  {
    id : "4",
    image : require("../images/pizza-icon.png"),
    title : "Pizza",
    selected : false,
  },
  {
    id : "5",
    image : require("../images/shrimp-icon.png"),
    title : "Sea Food",
    selected : false,
  },
  {
    id : "6",
    image : require("../images/soda-icon.png"),
    title : "Drinks",
    selected : false,
  },
]

export default CategoriesData;

我已将平面列表作为组件包含到类组件中

    export default class App extends React.Component {
  state = {
    fontsLoaded : false
  }

  loadfonts = async() => {
    await Font.loadAsync(customFonts)
    this.setState({fontsLoaded : true})
  }

  componentDidMount(){
    this.loadfonts()
  }

  componentWillUnmount(){
    this.setState({fontsLoaded: false})
  }
  render(){
    //console.log(colors.secondary)
    if(this.state.fontsLoaded)
    {
      return(
        <View style = {styles.container}>
          <ScrollView contentContainerStyle= {{paddingBottom : 20}} nestedScrollEnabled = {true}>
            
            <CategoriesList/>
            
          </ScrollView>
          <StatusBar style="dark" />
        </View>
      )
    }
    else
    {
      return (
          <Apploading/>
      )
    }

  }
}

有问题的平面列表如下，虽然我让它在点击时突出显示并在另一次点击时突出显示但似乎无法理解我需要的逻辑，因此当我点击另一个项目时，之前突出显示的项目被删除

const CategoriesList = ()=> (
  <View style = {styles.categoriesListContainer}>
    <FlatList
      contentContainerStyle={{ paddingRight :120, /*backgroundColor : "blue",*/  }}
      data = {categoriesData}
      renderItem = {(object) => <RenderCategories data = {object}/>}
      //keyExtrator = {(item,index) => index.toString()}
      horizontal = {true}/>
  </View>

)


const RenderCategories = (obj) => {
  //console.log(obj.data.item)

  const[selected, setSelected] = useState(obj.data.item.selected)
  const[selectedId, setSelectedId] = useState(1)
  //const[dataupdated, setDataUpdated] =useState(false)
  //const [previousId, setPreviousId] = useState(null)
  //const[flag, setFlag]  = useState(false)

  // console.log("previousID in function:", previousId)
  // console.log("selectedId in function:", selectedId)
  // console.log("selected in function:", selected)
  // console.log("obj.id in function:", obj.data.item.id, "\n\n")
   const onPress = (id)=> {
     console.log("selected : ", selected)
     console.log("selectedID :", id)
     //setPreviousId(selectedId)

     setSelected(previous=> !previous)
     setSelectedId(id)


   }
   // useEffect(()=> {
   //    //setDataUpdated(previous => !previous)
   // }, [selected, selectedId])

  return (

    <TouchableOpacity onPress = {()=>onPress(obj.data.item.id)}>
      <View style = {[styles.listItems, {backgroundColor : selected ? colors.primary : "#fff"}]} key = {obj.data.item.id}>
        <Image resizeMode = "stretch" source = {obj.data.item.image} style = {styles.listItemImage}/>
        <Text style = {styles.listItemTitle}>{obj.data.item.title}</Text>
        <View
          style = {[styles.iconwrapper, {backgroundColor : selected ? "#fff" : colors.secondary}]}>
          <Feather name = "chevron-right" size = {8}
            style = {[styles.categoryiconselect, {backgroundColor : selected ? "#fff" : colors.secondary}]}/>
        </View>
      </View>
    </TouchableOpacity>

  )
}

标签： reactjsreact-nativereact-native-flatlistreact-component