javascript - 如何使用 React refs、回调模式来更新状态

Question

目前，我正在尝试在组件内部使用模式来更新组件状态。我能够打开模式，并且能够填写输入值。点击添加按钮后，我希望更新状态并关闭模式。这应该会导致在主 Exercise 组件中显示新数据。

但是，当我尝试添加新行时，进程在 addWorkoutRow 方法中挂起并且没有出现任何错误。按钮变回 Add Workout 但模式不会关闭且状态不会更新。

我曾尝试使用 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

这是我的 package.json

{
    "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"
    }
}

Answer 1

在你的 for 循环中，你像这样递增 i += i。这会导致无限循环。这就是您的组件卡在渲染中的原因。将 for 循环增量更改为 i += 1。