Javascript 如何使用react refs、回调模式更新状态

目前，我正在尝试使用组件内部的模式来更新组件状态。我能够打开模态，并且能够填充输入值。一旦我点击add按钮，我希望状态被更新，模式被关闭。这将导致在主

练习中显示新数据

但是，当我尝试添加新行时，进程挂起在
addworkutrow
方法中，不会出现任何错误。按钮变回
添加训练
，但模式不会关闭，状态也不会更新

我尝试使用setState回调，但没有成功。我很确定，在设置
const newRow
和调用
setModalVisible
函数之间的错误，我只是没有退一步看到它

import React, {Component} from 'react';
import {Modal, View, StyleSheet, TextInput, Text, TouchableOpacity} from 'react-native';

const ExerciseItem = (name, sets, reps, weight) => (
    <View style={styles.exerciseItem}>
      <Text style={styles.itemInput}>{name}</Text>
      <Text style={styles.itemInput}>{sets}</Text>
      <Text style={styles.itemInput}>{reps}</Text>
      <Text style={styles.itemInput}>{weight}</Text>
    </View>
  );

class Exercise extends Component {
  constructor() {
    super();

    this.state = {
      showCustomForm: false,
      showWeightsForm: !this.showCustomForm,
      modalVisible: false,
      rows: [],
      counter: 0,
    }

    this.addWorkoutRow = this.addWorkoutRow.bind(this);
  }
  setModalVisible(visible) {
    this.setState({modalVisible: visible})
  }
  addWorkoutRow() {
    const name = this.name._lastNativeText;
    const sets = this.sets._lastNativeText;
    const reps = this.reps._lastNativeText;
    const weight = this.weight._lastNativeText;

    const newRow = { name, sets, reps, weight };
    const rows = this.state.rows;

    rows.push(newRow);

    this.setState({ rows });
    this.setModalVisible(!this.state.modalVisible);
  }
  render() {
    const rows = []

    for (let i = 0; i < this.state.rows.length; i += i) {
      rows.push(<ExerciseItem 
        key={i} 
        name={this.state.rows[i].name} 
        sets={this.state.rows[i].sets}
        reps={this.state.rows[i].reps}
        weight={this.state.rows[i].weight}
      />);
    }

    return (
      <View style={styles.container}>
        <Text style={{fontSize: 20, color: '#fff', fontWeight: 'bold' }}>Workout</Text>
        <Modal
          style={styles.modalContainer}
          animationType="fade"
          transparent
          visible={this.state.modalVisible}
          onRequestClose={() => console.log('closed')}
          presentationStyle="overFullScreen"
        >
          <TextInput
            ref={(input) => { this.name = input; }} 
            style={styles.modalInputs}
            placeholderTextColor={'#fff'}
            placeholder={'Exercise Name'} />
          <TextInput
            ref={(input) => { this.sets = input; }} 
            style={styles.modalInputs}
            placeholderTextColor={'#fff'}
            placeholder={'Sets'} />
          <TextInput
            ref={(input) => { this.reps = input; }} 
            style={styles.modalInputs}
            placeholderTextColor={'#fff'}
            placeholder={'Reps'} />
          <TextInput
            ref={(input) => { this.weight = input; }} 
            style={styles.modalInputs}
            placeholderTextColor={'#fff'}
            placeholder={'Weight'} />
          <TouchableOpacity
            onPress={() => this.addWorkoutRow()}
            style={styles.modalBtn}>
            <Text style={styles.drkContent}>+</Text>
          </TouchableOpacity>
        </Modal>
        {rows}
        <View style={styles.btnContainer}>
          <TouchableOpacity 
            onPress={() => this.setModalVisible(!this.state.modalVisible)} 
            style={styles.btns}>
            <Text style={styles.drkContent}>Add Workout</Text>
          </TouchableOpacity>
        </View>
      </View>
    )
  }
}

export default Exercise

在for循环中，您是这样递增的
i+=i
。这将导致无限循环。这就是为什么组件在渲染中卡住的原因。将循环增量更改为
i+=1
在您答复之前几秒钟，我就计算出了这一点。谢谢-我检查了一下记忆，发现它被暂停了。
{
    "name": "PresentApp",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest",
        "lint": "eslint ./components"
    },
    "dependencies": {
        "babel-eslint": "^8.2.1",
        "eslint": "^4.17.0",
        "eslint-config-airbnb": "^15.1.0",
        "eslint-config-prettier": "^2.9.0",
        "eslint-plugin-import": "^2.8.0",
        "eslint-plugin-jsx-a11y": "^5.1.1",
        "eslint-plugin-react": "^7.6.1",
        "prettier": "^1.10.2",
        "prop-types": "^15.6.0",
        "react": "16.0.0",
        "react-native": "0.50.4",
        "react-native-router-flux": "^4.0.0-beta.24",
        "react-native-sound": "^0.10.4"
    },
    "devDependencies": {
        "babel-jest": "21.2.0",
        "babel-preset-react-native": "4.0.0",
        "eslint-plugin-prettier": "^2.6.0",
        "firebase": "^5.0.4",
        "jest": "21.2.1",
        "react-test-renderer": "16.0.0"
    },
    "jest": {
        "preset": "react-native"
    }
}