React Native导出全局数组后跨页面引用仅显示最后一项如何解决

• 对象引用重复：JavaScript中对象属于引用数据类型，你在for循环外层仅声明了1个word对象，循环过程中每次修改属性都是操作同一块内存地址的对象，往N5Words数组里push的都是同一个对象的引用，循环结束后数组所有元素都会和最后一次修改的word值保持一致，这就是仅能展示最后一项的核心原因。
• 异步读取与渲染时机不匹配：RNFS.readFileAssets是异步方法，组件首次渲染时文件读取任务还未执行完成，此时N5Words是空数组；且你用普通全局数组存储数据，修改后不会触发React组件重新渲染，页面无法自动更新展示最新内容。
• 你遇到的批量报错是因为拆分词库行时，可能存在空行、制表符分割后字段不足3项的情况，直接取下标1、2会读取到undefined，调用toString方法就会抛出错误。

1. 修改App.js代码 #

import React, { useEffect, useState } from 'react';
import Navigator from './routes/menuStack';

export let N5Words = [];

export default function App(){
  const [wordList, setWordList] = useState([]);

  useEffect(() => {
    const RNFS = require('react-native-fs');
    RNFS.readFileAssets('N5.txt', 'utf8')
    .then((contents) => {
      const allWords = contents.split('\n');
      const tempList = [];
      for (let i = 0; i < allWords.length; i++){
        // 每次循环新建独立对象，避免引用重复
        const splittedRow = allWords[i].split('\t').filter(item => item.trim() !== '');
        // 跳过格式错误的行，避免下标报错
        if (splittedRow.length < 3) continue;
        const word = {
          key: i,
          japanese: splittedRow[0].trim(),
          kana: splittedRow[1].trim(),
          turkish: splittedRow[2].trim()
        };
        tempList.push(word);
      }
      N5Words = tempList;
      setWordList(tempList);
    })
  }, [])
  
  return <Navigator/>;
}

2. 修改KelimeTesti.js代码（适配全局数组导入的场景） #

import React, { useState, useCallback } from 'react';
import { View, Text, ScrollView } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';
import { globalStyles } from '../styles/global';
import { N5Words } from '../App';

export default function KelimeTesti({ navigation }){
  const [renderList, setRenderList] = useState([]);

  // 页面聚焦时同步最新单词列表，触发重新渲染
  useFocusEffect(
    useCallback(() => {
      setRenderList([...N5Words]);
    }, [])
  );

  return (
    <View style={globalStyles.container}>
      <Text style={globalStyles.smallText}>You're in Kelime Testi</Text>
      <ScrollView>
        {renderList.map((word) => {
          return (
            <View key={word.key}>
              <Text style={globalStyles.smallText}>{word.japanese}</Text>
            </View>
          )
        })}
      </ScrollView>
    </View>
  )
}

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