如何更改FlatList上的專案狀態而不影響ReactNative上的其他專案

我喜歡增加 Item 1 的數量而不改變 Item 2 和 Item 3 的數量。我如何在 React Native 中做到這一點？我是初學者。

這是我的代碼：（別管我自己的 AppText 和 AppButton 組件）

const items = [
        { id: 1 },
        { id: 2 },
        { id: 3 }
    ]

    const [quantity, setQuantity] = useState(1)

    return (
            <View style={styles.container}>
                <FlatList
                    data={items}
                    renderItem={({ item }) => (

                        <View style={styles.item}>

                            <AppText style={styles.number}>Item {item.id} |</AppText>

                            <View style={styles.buttonContainer}>
                                <AppButton title={"-"} type={"contained"} style={styles.button} onPress={() => setQuantity(quantity - 1)} />
                            </View>

                            <AppText style={styles.number}>{quantity}</AppText>

                            <View style={styles.buttonContainer}>
                                <AppButton title={" "} type={"contained"} style={styles.button} onPress={() => setQuantity(quantity   1)} />
                            </View>

                        </View>

                    )}
                />
            </View>

uj5u.com熱心網友回復：

• items最好在物件中添加一個鍵值quantity并僅處理該狀態（如果我們可以處理傳遞給items的那個，請不要依賴其他狀態）。dataFlatList
• 此外，最好保持良好的代碼格式以提高可讀性，例如不要直接處理函式，onPress而是創建一個單獨的函式來處理它

試試下面的代碼

const initialItems = [
     { id: 1, quantity:0 },
     { id: 2, quantity:0 },
     { id: 3, quantity:0 }
]

const [items, setItems] = useState(initialItems)

const updateQuantity = (index, value) => {
   if(value < 0) return;
   const tempItems = [...items];
   tempItems[index].quantity = value
   setItems(tempItems)
}

return (
  <View style={styles.container}>
    <FlatList
      data={items}
      renderItem={({ item, index }) => (
        <View style={styles.item}>
          <AppText style={styles.number}>Item {item.id} |</AppText>
          <View style={styles.buttonContainer}>
            <AppButton title={"-"} type={"contained"} style={styles.button} onPress={() => updateQuantity(index, item.quantity - 1)} />
          </View>
          <AppText style={styles.number}>{item.quantity}</AppText>
          <View style={styles.buttonContainer}>
            <AppButton title={" "} type={"contained"} style={styles.button} onPress={() => updateQuantity(index, item.quantity   1)} />
          </View>
        </View>
      )}
    />
  </View>
)

uj5u.com熱心網友回復：

需要創建一個 useState 物件來映射值

const items = [
    { id: 1 },
    { id: 2 },
    { id: 3 }
]

const [quantity, setQuantity] = useState({1: 0, 2: 0, 3: 0})


<View style={styles.container}>
            <FlatList
                data={items }
                renderItem={({ item }) => (

                    <View style={styles.item}>

                        <AppText style={styles.number}>Item {item.id} |</AppText>

                        <View style={styles.buttonContainer}>
                            <AppButton title={"-"} type={"contained"} style={styles.button} onPress={() => setQuantity((state) => ({...state,{[item.id] : state[item.id] - 1} })} />
                        </View>

                        <AppText style={styles.number}>{quantity[item.id] || 0}</AppText>

                        <View style={styles.buttonContainer}>
                            <AppButton title={" "} type={"contained"} style={styles.button} onPress={() => setQuantity((state) => ({...state,{[item.id] : state[item.id]   1} })} />
                        </View>

                    </View>

                )}
            />
        </View>

標籤：反应反应式反应本机平面列表

上一篇：添加crashlytics以回應原生專案會引發錯誤

下一篇：沒有依賴項的UserMemo與沒有沒有依賴項的使用UseMemo