React native，click事件参数值在foreach循环中未设置唯一

Question

我是反应原生的新手，我遇到了一个问题。我有注册页面，其中有两个部分，第一个是父母注册，第二个是学生注册。因此，父母可以根据要求添加子注册表单。如果父母想要删除任何子表单或块，则有删除信息功能，但是当我在foreach循环中绑定我的删除按钮单击事件时，所有按钮的参数值保持相同。每次当我点击删除按钮时，它删除最后一个表格。

这是我的代码

export default class SignUp extends React.Component {

  constructor() {
    super()
    {

    }

    this.index = 1;

    this.animatedValue = new Animated.Value(0);

    this.state = {
      username: '', password: '', email: '', phone_number: '', registrationData: [],
      valueArray: [], key: 0, index: 0
    }
  }

  AddMore = async () => {
    try {
      var data = this.state.index + 1;
      this.setState({ index: data });
    }
    catch (error) {
      alert(error);
    }

    try {

      this.animatedValue.setValue(0);
      let newlyAddedValue = { index: this.index }

      this.setState({ disabled: true, valueArray: [...this.state.valueArray, newlyAddedValue] }, () => {
        Animated.timing(
          this.animatedValue,
          {
            toValue: 1,
            duration: 500,
            useNativeDriver: true
          }
        ).start(() => {
          this.index = this.index + 1;
          this.setState({ disabled: false });

        });
      });
    }
    catch (error) {
      alert("Error " + error);
    }
  }

  static navigationOptions = {
    title: 'Registration',
  }

  onRemoveBlock = (key) => {
    try {
      var r = this.state.valueArray;
      var d = r.length - key;
      r.splice(d, 1);
      this.setState({ valueArray: r });
    }

    catch (error) {
      alert(error)
    }
  }

  render() {

    let data = [{
      value: 'Male',
    }, {
      value: 'Female'
    }];

    this.position = 0;
    let newArray = this.state.valueArray.map((item, key) => {
      this.position = key + 1;

      return (
        <View style={styles.container} key={key} >

          <ScrollView>

            <Button
              title={'Remove'}
              onPress={() => this.onRemoveBlock(this.position)}
            />

            <TextInput
              style={styles.input}
              placeholder={'First Name'}
              autoCapitalize="none"
              placeholderTextColor='white'
              onChangeText={val => this.onChangeText('childfirstname' + this.position, val)}
            />

          </ScrollView>
        </View>

      );
    });
    return (
      <View style={styles.container}>
        <ScrollView>
          <Text h1>Parent Registration</Text>

        <TextInput
            style={styles.input}
            placeholder='First Name'
            autoCapitalize="none"
            placeholderTextColor='white'
            onChangeText={val => this.onChangeText('firstname', val)}
          />


          <Text h1>Student Registration</Text>
          <View style={styles.container} key={123} >

            <ScrollView>

              <TextInput
                style={styles.input}
                placeholder={'First Name'}
                autoCapitalize="none"
                placeholderTextColor='white'
                onChangeText={val => this.onChangeText('childfirstname0', val)}
              />

            </ScrollView>
          </View>

          <View style={{ flex: 1, padding: 4 }}>
            {
              newArray
            }
          </View>
          <Text>{"\n"}</Text>

        </ScrollView>

        <TouchableOpacity activeOpacity={0.8} style={styles.btn} disabled={this.state.disabled} onPress={this.AddMore}>
          <Image source={require('./assets/add.png')} style={styles.btnImage} />
        </TouchableOpacity>
      </View>
    )
  }
    }

Answer 1

当我单击“删除”按钮时，由于键，文本输入的值已使用其他文本字段更新。它删除了我要删除的部分，所以一切正常，我只需要正确管理控制索引。

我已经更新了代码，现在它工作正常

我只需要为valuearray循环中的位置指定索引值而不是键

let newArray = this.state.valueArray.map((item, key) => {
      //this.position = key + 1;
      this.position=item.index;
      return (
        <View style={styles.container} key={this.position} >

          <ScrollView>

            <Button
              title={'Actual Key -> '+item.index +' key -> '+key}
              onPress={() => this.onRemoveBlock(key)}
              key={key}
            />

            <TextInput
              style={styles.input}
              placeholder={'First Name'+this.position}
              autoCapitalize="none"
              placeholderTextColor='white'
              onChangeText={val => this.onChangeText('childfirstname' + this.position, val)}
            />

          </ScrollView>
        </View>

      );
    });

所以现在控制值总是保持不变