如何解决React Native-类组件到功能组件UseEffect:状态未定义
我需要将我的类组件代码转换为功能性挂钩组件。我有下面的类组件逻辑工作。但是,对于我来说,要实现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 })
}
解决方法
尝试一下:
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
,这有效!!我希望它可以帮助其他人。谢谢
const { data,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)
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。