React Native文件上传后无法展示文件信息问题求助

我用React Native开发了一个文件选择按钮，功能正常，但选中文件后，设备视图里始终显示文件名称、大小等信息为undefined，虽然控制台能正常打印出这些信息。

相关代码 #

import DocumentPicker from 'react-native-document-picker';

const App = () => {
  const [singleFile, setSingleFile] = useState('');
  
  const selectOneFile = async () => {
    try {
      const res = await DocumentPicker.pick({
        type: [DocumentPicker.types.allFiles],
      });
      console.log('res : ' + JSON.stringify(res));
      console.log('URI : ' + res.uri);
      console.log('Type : ' + res.type);
      console.log('File Name : ' + res.name);
      console.log('File Size : ' + res.size);
      setSingleFile(res);
    } catch (err) {
      if (DocumentPicker.isCancel(err)) {
        alert('Canceled from single doc picker');
      } else {
        alert('Unknown Error: ' + JSON.stringify(err));
        throw err;
      }
    }
  };
  
  return (
    <>
      <TouchableOpacity
        activeOpacity={0.5}
        style={styles.buttonStyle}
        onPress={selectOneFile}>
        <Text style={{marginRight: 10, fontSize: 19}}>
          Click here to pick one file
        </Text>
        <Image
          source={{
            uri: 'https://img.icons8.com/offices/40/000000/attach.png',
          }}
          style={styles.imageIconStyle}
        />
      </TouchableOpacity>
      <Text style={styles.textStyle}>
        File Name: {singleFile.name ? singleFile.name : ''}
        {'\n'}
        Type: {singleFile.type ? singleFile.type : ''}
        {'\n'}
        File Size: {singleFile.size ? singleFile.size : ''}
        {'\n'}
        URI: {singleFile.uri ? singleFile.uri : ''}
        {'\n'}
      </Text>
    </>
  )
}

问题原因 #

控制台输出显示，DocumentPicker.pick()返回的是数组（即使只选择了单个文件），但代码里直接把这个数组赋值给了singleFile状态。数组本身没有name、size这类属性，所以访问时会返回undefined。

解决方法 #

1. 修正状态赋值：取数组的第一个元素赋值给singleFile

// 替换原来的setSingleFile(res);
setSingleFile(res[0]);

2. 优化状态初始化：将初始值从空字符串改为null，更符合对象类型的预期

const [singleFile, setSingleFile] = useState(null);

3. 简化文本展示逻辑：使用可选链操作符?.简化判断，避免冗余代码

<Text style={styles.textStyle}>
  File Name: {singleFile?.name || ''}
  {'\n'}
  Type: {singleFile?.type || ''}
  {'\n'}
  File Size: {singleFile?.size || ''}
  {'\n'}
  URI: {singleFile?.uri || ''}
  {'\n'}
</Text>

修改后就能正常在设备视图中展示所选文件的名称、大小等信息了。

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