Блог

Я новичок в использовании перехватчиков React, и мне нужно преобразовать мой Class Components код в Functional Hooks . У меня есть Class Components логика ниже, которая хорошо работает. Однако приведенный выше код вызывает у меня проблемы. Я пытаюсь создать список с несколькими вариантами выбора. Кто-нибудь, пожалуйста, может помочь с исправлением этого кода.

     const { data, status } = useQuery('stores', fetchStores)
    const [isSelected, setIsSelected] = useState(false)

    const storeList = data

    useEffect(() => {

        let array = storeList.map((item, index) => {
            isSelected = false
            return { ...item }
        })

        setIsSelected({ ...isSelected, array: { ...storeList.array } })

        selectHandler()

    }, [])


    const selectHandler = (ind) => {

        let array = storeList.map((item, index) => {
            if (ind == index) {
                item.isSelected = !item.isSelected
            }
            return { ...item }
        })
        setIsSelected({ ...isSelected, array: { ...storeList.array } })
    }
  

Та же логика с ComponentDidMount работает отлично

 async componentDidMount() {

        let array = this.state.storeList.map((item, index) => {
            this.isSelected = false
            return { ...item }
        })
        this.setState({ storeList: array })
    }

    selectionHandler = (ind) => {
        const { storeList } = this.state
        let array = storeList.map((item, index) => {
            if (ind == index) {
                item.isSelected = !item.isSelected
            }
            return { ...item }
        })
        this.setState({ storeList: array })
    }