React useState对象模式报错：Cannot read properties of null (reading '0')

首先，这个报错Uncaught TypeError: Cannot read properties of null (reading '0')的核心是你在尝试读取一个null值的下标[0]，和你把独立useState改成对象形式直接相关，大概率是以下几个原因：

• 对象状态初始值设置不当：
  原来用独立useState时，比如const [fileData, setFileData] = useState([])，初始值是安全的空数组；改成对象形式后，你可能把对应属性初始设成了null，比如const [state, setState] = useState({ fileData: null })，之后访问state.fileData[0]自然就会报错。

• 更新对象状态时覆盖了原有属性：
  更新状态时如果直接写setState({ fileData: newData })，会把整个状态对象替换掉，原来的其他属性会丢失，要是之前的fileData被意外重置成null或undefined，后续访问也会报错。必须用展开运算符保留原有状态：setState(prev => ({ ...prev, fileData: newData }))。

• 文件输入的时机问题：
  如果你是在处理文件上传，比如用FileReader读取文件，可能在文件还没读取完成就去访问状态里的文件数据，这时候对应属性还是初始的null，就会触发报错。要确保在FileReader的onload回调里再更新状态，比如：

  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = (evt) => {
      // 把文件内容转成字符串（如果需要的话），再更新到对象状态里
      setState(prev => ({ ...prev, fileData: evt.target.result }));
    };
    reader.readAsText(file); // 转字符串用这个，按需选择readAsDataURL等方法
  };
  

• 访问属性前未做空值检查：
  不管是不是文件的问题，访问state.fileData[0]前最好加个空值判断，比如用可选链state.fileData?.[0]，或者先判断if (state.fileData)再访问，避免因状态未初始化完成导致报错。

至于文件是否要当作字符串处理，看你的业务需求：如果需要读取文件的文本内容，就用readAsText转成字符串；如果是图片等二进制文件，可能用readAsDataURL转成Base64更合适。

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