React Native - Class 组件到功能组件（UseEffect：state 未定义）

Question

我需要将我的 Class 组件代码转换为功能挂钩组件。 我有下面的 Class 组件逻辑有效。 但是，要实现Context Api ，我需要将其转换为挂钩。

我在控制台记录它时得到storeList undefined 并出现此错误... TypeError: undefined is not an object (evaluating 'storeList'.map) 。 有没有办法在 UseEffect 中引入state ？ 先感谢您

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 } })
    }

这是与 Class 组件相同的代码，它可以完美运行

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 })
    }

Answer 1

尝试这个：

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(state => ({ ...state, array: { ...storeList.array } }));

        selectHandler()

    }, [])


    const selectHandler = (ind) => {

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

参考： https://stackoverflow.com/a/63522873/10994570

Answer 2

这行得通。！ 我希望它可以帮助别人。 谢谢

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

    const storeList = data

    useEffect(() => {

        handlerControl()


    }, [])

    const handlerControl = async () => {
        try {
            let array = await storeList.map((item, index) => {
                isSelected = false
                return { ...item }
            })

            setIsSelected(array)
        } catch (e) {
            console.log(e)
        }

    }


    const selectHandler = async (ind) => {

        //alert('pressed')
        try {
            let array = await storeList.map((item, index) => {
                if (ind == index) {
                    item.isSelected = !item.isSelected
                }
                return { ...item }
            })
            setIsSelected(array)
            console.log(index)
        } catch (e) {
            console.log(e)
        }
    }