react-native - 如何使用 useState Hook 来处理来自 React Native 中 FlatList 的多个动态文本输入？

Question

---

我有一个功能组件，它是一个屏幕，我需要处理一些状态。我不想重构我的代码以使其成为类组件，并且我想使用钩子(Hook)。我在屏幕中有一个组件，用于呈现产品描述、数量和用户输入数量框的平面列表(来自 JSON)。目前，我所有输入数量的状态都绑定(bind)在一起，因此当我在 1 个框中输入数字时，相同的数字会显示在所有框中。如何使用钩子(Hook)分离并存储输入状态？

网上有很多使用钩子(Hook)存储 1 个数据但不是多个数据的示例，因为我不知道会有多少“产品”，所以我无法为它们创建不同的 useState。我最好为所有输入框使用 1 个 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>
  );
};

Answer 1

免责声明:我没有使用过 React Native，但我通常做的是在列表中创建名称、项目的 id，然后在更改状态时传递该名称

<input name={id} onChange={onChange} />

然后进行一次调用以使用状态，但使更改函数从事件处理程序获取名称

  const [productQuantity, setProductQuantity] = React.useState('')
  const onChange = (e) => {
    const {name, value} = e.target;
    setProductQuantity({...productQuantity,[name]:value})
  };

但是，对于您的具体情况，您可能还需要一个函数来从状态获取安装数量，您也可以将一个函数传递给子级以按照

的方式执行此操作

  const getProductQuantity = (id) => (
    productQuantity[id] && productQuantity[id] || 0
  )