Question

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

2020-08-22

108

javascript react-native react-hooks use-effect

我需要将我的类组件代码转换为功能挂钩组件。我有下面的类组件逻辑可以工作。但是，为了实现 Context Api ，我需要将其转换为挂钩。

当我在控制台记录它时，我得到 storeList 未定义，并且此错误... TypeError：未定义不是对象（评估'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 } })
    }

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

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