Question

从下面的示例代码中，我试图呈现文本框以及Flatlist renderItem方法中的内容，同时尝试更新文本框值。

键入单个字符后，设备上的运气不佳，键盘掉了。

请在以下网址找到相关的零食博览会：https://snack.expo.io/BJGMscqsS 这是代码：

import * as React from "react";
import {
  View,
  Text,
  FlatList,

  TextInput
} from "react-native";

export default class App extends React.Component {
  state = {
data: []
  };
  updateItem = async (index, innerindex, itemAttributeVal) => {
    console.log(index, innerindex, itemAttributeVal);
    console.log(this.state.data);
    let { data } = this.state;
    data[index][innerindex].Value = itemAttributeVal;
    this.setState({
      data
    });
    console.log("newtry", this.state.data);
  };
  componentDidMount = async () => {
const listdata = 
  {
    totalRow: "2",
    coddindata: [
      {
        "SNo": "1",
        "Item": "10",
        "Material Code": "SERVICE LABOUR1",
        "Invoice Description": "Labour for Services1",
        "Invoice Item Amt": "765000.00",
        "Approved Quantity": "85",
      },
      {
        "SNo": "2",
        "Item": "20",
        "Material Code": "SERVICE LABOUR1",
        "Invoice Description": "Labour for Services2",
        "Invoice Item Amt": "810000.00",
        "Approved Quantity": "90",
      }
    ]
  }
;
const codingData = listdata.coddindata;
var finalarr = [];
var finalarr1 = [];
codingData.map(datavalue => {
  finalarr1 = [];
  Object.keys(datavalue).map((key, val) => {
    finalarr1.push({ Key: key, Value: datavalue[key] });
  });
  finalarr.push(finalarr1);
});
this.setState({
  data: [...this.state.data, ...finalarr],
  totalCount: listdata.totalRow
});
console.log(this.state.data);
  };

  render() {
return (
  <View style={{ flex: 1,padding: 20}}>
    <FlatList
      style={{ padding: 20 }}
      data={this.state.data}
      renderItem={({ item, index }) =>
        item.map((element, innerindex) => {
          // console.log(" innerindex  ",innerindex);
          const inputstateval = this.state.data[index][innerindex].Value;
          return (
            <View
              key={Math.random().toString()}
              style={{
                alignItems: "center",
                height: 30,
                justifyContent: "center",
                flexDirection: "row",
                lineHeight: 4
              }}
            >
              <View style={{ flex: 1, alignSelf: "stretch" }}>
                <Text>{element.Key}</Text>
              </View>
              {/* { element.Key != "total_amount" ? */}
              {element.Key !== "Approved Quantity" ? (
                <View
                  style={{ flex: 2, alignSelf: "stretch", marginTop: 3 }}
                >
                  <Text>{element.Value}</Text>
                </View>
              ) : (
                <View
                  style={{ flex: 2, alignSelf: "stretch", marginTop: 3 }}
                >
                  <TextInput
                    // defaultValue={element.Value}
                    placeholder={element.Key}
                    onChangeText={text => {
                      console.log("in onChangeText--- ");
                      this.updateItem(index, innerindex, text);
                    }}
                    value={this.state.data[index][innerindex].Value}
                    style={{
                      paddingTop: 1,
                      fontSize: 16,
                      borderWidth: 1,
                      height: 30,
                      marginTop: -6
                    }}
                  />
                </View>
              )}
            </View>
          );
        })
      }
      keyExtractor={item => Math.random().toString()}
    />
  </View>
);
  }
}

Answer 1

在您的代码中，您只需要将第87和132行固定为以下内容：

87: key={'key'}
132: keyExtractor={(item) => ''+item}

因此react知道即使在渲染之后，这些文本输入也与setState更新之前的文本输入相同。

仍然，我无法在项目中修复此错误。

Flatlist状态更新中的动态文本输入

1 个答案: