Question

我需要将我的类组件代码转换为功能性挂钩组件。我有下面的类组件逻辑工作。但是，对于我来说，要实现Context Api，我需要将其转换为钩子。

我在控制台登录storeList时得到未定义，并且此错误... 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)
        }
    }

React Native-类组件到功能组件（UseEffect：状态未定义）

2 个答案: