For i 循环无限运行 React Native

Question

我目前正在用 React Native 编写一个应用程序，其中我有一些保存文件存储在一个数组中。在下面的代码中，我遍历这些保存并创建数据的 JSON 版本，以便使用单独的函数将其传输到 XML。问题是代码可以工作，但可以无限运行，而不是创建几个按钮，而是创建一个永无止境的数量（我附上了截图）。任何帮助都将不胜感激，因为我已经坚持了几天并且已经尝试了一切！

export function sessionsViewer({ navigation, route }) {

  const [dataResults, setDatResults] = useState({ type: "View", children: [{}] })

  async function getDataResults() {
    var previousSaves = await getDataJSON('saves')
    for(let i = 0; i < previousSaves.length; i++){
      let prevSave = previousSaves[i]
      let json = {
        'type': 'View',
        'children': [
          {
            'type': 'Touchable',
            'styles': [styles.startButton, { width: widthPercentageToDP(90) }],
            'onpress': () => { alert('You pressed me!' + JSON.stringify(prevSave.scores)) },
            'children': [
              {
                'type': 'Text',
                'text': prevSave.technique + ': ' + prevSave.datetime,
                'styles': styles.buttonTXT
              }
            ]
          }
        ]
      }
      let prevDataResults = dataResults
      prevDataResults.children.push(json)
      setDatResults({ ...prevDataResults })
    }
  }

Image showing infinite list

Answer 1

您可以添加一个全局布尔变量，例如let control = false;。并在调用 setDatResults 之前设置为 true。

control = true;
setDatResults({ ...prevDataResults })
control = false;

如果我们在 getDataResults 函数的开头控制这个变量。 这样可以防止无限循环。

async function getDataResults() {
    if (control) {
       return;
    }