Javascript 文本在FlatList项中输入

我有一个问题，如下图所示：

正如你们看到的，我有每一项的信息：姓名和库存。现在我想通过在文本输入中键入一个数字来更新单个项目的库存，但是当我在1个文本输入中键入3时，它会在所有剩余的文本输入中填充3。这是我的渲染项：

renderItem = ({item}) => {
    return (
      <View style={styles.card}>
        <TouchableOpacity
          onPress={() => {
            setCreateAt(item.WarehouseProduct.createdAt);
            setNote(item.note);
            setShowModal(true);
          }}>
          <Image
            style={styles.tinyLogo}
            source={require('../assets/images/fish.jpg')}
          />
        </TouchableOpacity>
        <View
          style={{
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            marginLeft: 5,
            height: 75,
            width: 160,
          }}>
          <Text numberOfLines={2} style={styles.text}>
            {item.name}
          </Text>
          <Text style={styles.text}>
            {item.WarehouseProduct.stock.toString()}
          </Text>
        </View>
        <View style={styles.iconcontainer}>
          <Button title="clear" onPress={() => console.log(text)} />
        </View>
        <View
          style={{
            alignSelf: 'center',
            marginLeft: 20,
            borderWidth: 1,
            borderRadius: 10,
          }}>
          <TextInput
            style={{height: 40, width: 50}}
            keyboardType="numeric"
            onChangeText={(income) => setText(income)}
            value={text}
          />
        </View>
      </View>
    );
  };

renderItem=（{item}）=>{
返回(
{
setCreateAt（item.WarehouseProduct.createdAt）；
setNote（项目注释）；
设置显示模式（真）；
}}>
{item.name}
{item.WarehouseProduct.stock.toString（）}
console.log（文本）}/>
setText（收入）}
值={text}
/>
);
};

---

有人能帮我解决这个问题吗？给我一个主意。谢谢大家

您在renderitem中放入的任何内容都将与flatlist中的数据一样呈现

<Flatlist 
  data={containtmultipledata}
  renderItem={
    ....
    <TextInput
        style={{height: 40, width: 50}}
        keyboardType="numeric"
        onChangeText={(income) => setText(income)}
        value={text}
      />
    ....
  }
>

....
}
>

但您将其分配为单个值

您可以通过项中的索引直接更改放入flatlist中的数据

 <TextInput
    style={{height: 40, width: 50}}
    keyboardType="numeric"
    onChangeText={(txt) => containMultipledata[index].yourObjectName = txt}
    value={item.yourObjectName}
  />  

containMultipledata[index].yourObjectName=txt}
值={item.yourObjectName}
/>  

您在renderitem中输入的任何内容都将与您在flatlist中的数据一样呈现

<Flatlist 
  data={containtmultipledata}
  renderItem={
    ....
    <TextInput
        style={{height: 40, width: 50}}
        keyboardType="numeric"
        onChangeText={(income) => setText(income)}
        value={text}
      />
    ....
  }
>

....
}
>

但您将其分配为单个值

您可以通过项中的索引直接更改放入flatlist中的数据

 <TextInput
    style={{height: 40, width: 50}}
    keyboardType="numeric"
    onChangeText={(txt) => containMultipledata[index].yourObjectName = txt}
    value={item.yourObjectName}
  />  

containMultipledata[index].yourObjectName=txt}
值={item.yourObjectName}
/>  

试试这种方法

const [data, setData] = useState([... flat list data here default]);

const onTextChanged = (index, value) => {
    const data = [...data]; 
    data[index].availableStock = value; <-- "availableStock" is example key for showing way out of this -->
    setData(data);
}

renderItem = ({item, index}) => {
    return (
      <View style={styles.card}>
        ......
        <TextInput
            ...
            onChangeText={(income) => onTextChanged(index, income)}
            value={item.availableStock || 0}
          />
      </View>
    );
};

const[data，setData]=useState（[…此处为默认平面列表数据]）；
const onTextChanged=（索引，值）=>{
常量数据=[…数据]；
数据[索引].availableStock=value；
setData（数据）；
}
renderItem=（{item，index}）=>{
返回(
......
onTextChanged（索引、收入）}
值={item.availableStock | | 0}
/>
);
};

试试这种方法

const [data, setData] = useState([... flat list data here default]);

const onTextChanged = (index, value) => {
    const data = [...data]; 
    data[index].availableStock = value; <-- "availableStock" is example key for showing way out of this -->
    setData(data);
}

renderItem = ({item, index}) => {
    return (
      <View style={styles.card}>
        ......
        <TextInput
            ...
            onChangeText={(income) => onTextChanged(index, income)}
            value={item.availableStock || 0}
          />
      </View>
    );
};

const[data，setData]=useState（[…此处为默认平面列表数据]）；
const onTextChanged=（索引，值）=>{
常量数据=[…数据]；
数据[索引].availableStock=value；
setData（数据）；
}
renderItem=（{item，index}）=>{
返回(
......
onTextChanged（索引、收入）}
值={item.availableStock | | 0}
/>
);
};