我有一个功能组件是一个屏幕，我需要处理一些状态。我不想重构我的代码，使其成为一个类组件，我想利用挂钩。我有一个组件在屏幕中呈现一个平面列表（来自JSON）的产品描述、数量和一个用于用户输入数量的框。目前，我的所有输入数量的状态都是绑定在一起的，所以当我在一个框中输入一个数字时，这个数字会在所有的框中显示。2我如何使用钩子来分离和存储输入的状态呢？
网上有很多使用钩子来存储1个数据的例子，但不是多个，因为我不知道有多少个“产品”会有一个时间头，我不能为他们创建不同的useState。我最好有一个useState为所有的输入框，并存储在一个数组中？

import { Text, View, StyleSheet, SafeAreaView, FlatList } from "react-native";

function InstallScreen({ navigation, route }) {
  // State for the number installed component
  const [quantityInstalled, setQuantityInstalled] = useState([]);

  const { item } = route.params;

  // pulling just the product arrays from the job data and storing separately
  const productData = item.products;

  return (
    <View style={styles.containerNine}>
      <View style={styles.descriptionBoxContainer}>
        <View style={styles.descriptionBox}>
          <FlatList
            data={productData}
            keyExtractor={(item) => item.id.toString()}
            renderItem={({ item }) => (
              <DescriptionBox
                productDescription={item.description}
                dueQuantity={item.quantity}
                value={quantityInstalled}
                onChangeText={(value) => setQuantityInstalled(value)}
              />
            )}
          />

          <Text>Number installed is {quantityInstalled} </Text>
        </View>
      </View>
    </View>
  );
};

组件描述

import { View, Text, StyleSheet, TextInput } from "react-native";

const DescriptionBox = (props) => {
  return (
    <View style={styles.productsAllContainer}>
      <View style={styles.descriptionBoxStyle}>
        <Text style={styles.textStyle}>{props.productDescription}</Text>
      </View>

      <View style={styles.qtyBoxStyle}>
        <Text style={styles.qtyTextStyle}>{props.dueQuantity}</Text>
      </View>

      <View>
        <TextInput
          style={styles.installedBoxStyle}
          textAlign="center"
          fontSize="18"
          fontWeight="bold"
          autoCapitalize="none"
          autoCorrect={false}
          keyboardType={"numeric"}
          maxLength={5}
          value={props.value}
          onChangeText={props.onChangeText}
        />
      </View>
    </View>
  );
};