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

从下面的示例代码中，我尝试渲染textbox以及Flatlist renderItem方法中的内容，同时尝试更新textbox值

坏运气是在设备上输入一个字符后，键盘关闭

有关小吃博览会，请访问： 以下是代码：

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>
);
  }
}

import*as React from“React”；
进口{
看法
文本，
平面列表，
文本输入框
}从“反应本族语”；
导出默认类App扩展React.Component{
状态={
数据：[]
};
updateItem=async（索引、innerindex、itemAttributeVal）=>{
log（index，innerindex，itemAttributeVal）；
console.log（this.state.data）；
设{data}=this.state；
数据[index][innerindex].Value=itemAttributeVal；
这是我的国家({
数据
});
log（“newtry”，this.state.data）；
};
componentDidMount=async（）=>{
常量列表数据=
{
totalRow:“2”，
编码数据：[
{
“SNo”：“1”，
“项目”：“10”，
“材料代码”：“服务劳动力1”，
“发票说明”：“服务人工1”，
“发票项目金额”：“765000.00”，
“批准数量”：“85”，
},
{
“SNo”：“2”，
“项目”：“20”，
“材料代码”：“服务劳动力1”，
“发票说明”：“服务人工2”，
“发票项目金额”：“810000.00”，
“批准数量”：“90”，
}
]
}
;
const codingData=listdata.coddindata；
var finalarr=[]；
var finalar1=[]；
codingData.map（数据值=>{
最终r1=[]；
Object.keys（datavalue）.map（（key，val）=>{
finalarr1.push（{Key:Key，Value:datavalue[Key]}）；
});
最后一推（最后一推）；
});
这是我的国家({
数据：[…this.state.data，…finalarr]，
totalCount:listdata.totalRow
});
console.log（this.state.data）；
};
render（）{
返回(
item.map（（元素，内部索引）=>{
//log（“innerindex”，innerindex）；
const inputstateval=this.state.data[index][innerindex].Value；
返回(
{element.Key}
{/*{element.Key！=“总金额”？*/}
{element.Key！==“批准数量”(
{element.Value}
) : (
{
log（“在onChangeText--”中）；
this.updateItem（索引、内部索引、文本）；
}}
value={this.state.data[index][innerindex].value}
风格={{
paddingTop:1，
尺寸：16，
边框宽度：1，
身高：30，
玛金托普：-6
}}
/>
)}
);
})
}
keyExtractor={item=>Math.random（）.toString（）}
/>
);
}
}

在代码中，只需将第87行和第132行修改为如下内容：

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

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

---

尽管如此，我还是无法在我的项目中修复相同的错误。

虽然这可能是一个很好的建议，但如果你不能回答这个问题，就不应该将其作为答案发布。将来，一旦您在堆栈溢出问题上赢得了更多的声誉，您将有机会以评论的形式指出主要问题附带的错误，这更合适。@JeremyCaney，谢谢您的建议，但该错误的实际答案或原因如我在部分中所解释的：“因此react知道，即使在渲染之后，这些文本输入也与setState更新之前的文本输入相同。”在组件重新渲染之后，需要再次找到引用，否则它将被视为新组件，键盘将隐藏，因为焦点位于不存在loger的组件上除非你明确地说这是通过保存相同的密钥来保持的。这无疑是一个答案。