React Native中useState报错：Cannot read properties of null (reading 'useState')

问题分析 #

你遇到的Cannot read properties of null (reading 'useState')错误，核心原因是违反了React Hook的调用规则——你把useState和useEffect直接写在了函数组件的外部，而不是组件内部的顶层位置。

你的环境依赖：

{
  "native-base": "^2.8.2",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-native": "0.71.6",
  "react-native-swiper": "^1.6.0",
  "react-native-web": "~0.18.10"
}

修正后的代码 #

把useState和useEffect移动到productContainer函数组件内部即可解决问题：

import { StyleSheet, Text, View } from 'react-native';
import React,{ useState, useEffect } from 'react';

const data = require('../../assets/data/products.json');

const productContainer = () => {
  // 将Hook移到组件内部顶层
  const [products, setProducts] = useState([]);

  useEffect(() => {
    setProducts(data);
    
    return () => {
      setProducts([])
    }
  }, [])

  return (
    <View>
      <Text>products </Text>
    </View>
  )
}

export default productContainer;

const styles = StyleSheet.create({})

关键规则提醒 #

React Hook必须满足以下两个核心规则：

• 只能在函数组件或自定义Hook的顶层调用Hook，不能在组件外部、条件语句、循环、嵌套函数中调用。
• 每次渲染组件时，Hook的调用顺序必须保持一致。

之前的代码中，Hook写在组件外部，React无法识别它们属于哪个组件的上下文，因此抛出了"读取null的useState属性"的错误。

内容的提问来源于stack exchange，提问作者WiikoiTek