Question

我目前正在尝试使用自己在componentWillMount()中获取的一些数据来制作自己的板子，然后将这些数据存储在一个状态中。到这里，一切正常，我可以显示一些FlatList的数据。但是，在其中一个中，我使用TextInput来更改数量值。当该值为null时，我可以毫无问题地对其进行修改。但是，当有一个值（随取来存储）时，我无法对其进行修改。当我尝试时，TextInput将其替换为默认值。我不明白，因为在我的onChangeText中，我正在修改所使用的数组中的值。

我正在使用React Native和Expo进行开发。

<FlatList
  data={state.tableData}
  keyExtractor={item => item.product_id + ""}
  renderItem={({ item, index }) => (
    <View style={[styles.columnRow, { backgroundColor: "#dff2ff" }]}>
      <TextInput
        style={styles.textInput}
        maxLength={10}
        textAlign={"center"}
        keyboardType={"numeric"}
        returnKeyType="next"
        blurOnSubmit={false}
        onChangeText={text => {
          let { tableData } = this.state;
          let newQte = "";
          let numbers = "0123456789";

          for (var i = 0; i < text.length; i++) {
            if (numbers.indexOf(text[i]) > -1) {
              newQte = newQte + text[i];
            } else {
              alert("Veuillez saisir uniquement des chiffres.");
            }
          }
          tableData[index].quantity = newQte;
          this.setState({
            tableData
          });
        }}
        value={item.quantity}
      />
    </View>
  )}
  scrollEnabled={false}
/>;

我需要能够修改当前值并在之后存储它。

Answer 1

问题是您要在onChangeText的{{1}}中突变项目的状态对象。

但是，tableData[index].quantity = newQte实现了状态的浅表比较，这意味着您为项目修改的子状态FlatList并不总是触发渲染。由于某种原因，它可以使用null或undefined，这可能是由于内部优化所致。

解决方案是在不更改初始状态的情况下完全创建一个新数组：

quantity

我无法修改Flatlist中TextInput的值

1 个答案: