0

为了简单起见，我制作了一个较短的版本。我知道这里的一些代码是错误的。我花了好几个小时尝试不同的方法，但什么都做不了，所以我把它去掉了。

目标：我正在渲染一个平面列表。我需要能够通过单击每个特定 FlatList 项中的按钮来更新数组中每个对象中的“数量”。

因此，如果我在“abc”中单击“增加数量”，则“数量”数据将增加 1。

我在网上到处找，似乎无法靠近。任何帮助将不胜感激。

import React, { useState } from 'React';
import { View, Text, Button, FlatList } from 'react-native';

const DataApp = () => {
const [data, setData] = useState([
    { id: 1, name: 'abc', qty: 1 },
    { id: 2, name: 'def', qty: 2 },
    { id: 3, name: 'ghi', qty: 3 },
]);

const incQuantityHandler = (data) => {
    setData([...data, prevState => qty[prevState] + 1 ])
}

const Item = ({ item }) => (
    <View>
        <Text>{item.name}</Text>
        <Text>{item.qty}</Text>
        <Button title="Increase QTY" onPress={incQuantityHandler}/>
    </View>
)

const renderItem = ({ item }) => (
    <Item name={item.name} qty={item.qty} />
)

return (
    <View>
        <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        />
    </View>
)
}

export default DataApp;
4

1 回答 1

0

使用您当前的设置，incQuantityHandler只要按下按钮，就会使用事件对象调用。顺便说一句，你应该使用onClick。

您可以使用箭头函数传递您正在按下的按钮，否则使用包装函数：

onClick={() => incQuantityHandler(item.name)}
// or alternatively, but basically the same:
const wrapHandler = item => (() => incQuantityHandler(item.name));
onClick={wrapHandler(item)}

你incQuantityHandler自己是不正确的。我建议重新阅读 React 文档并了解数组解构/扩展，但您可能想要类似的东西：

// Remember that now we get the item name instead
const incQuantityHandler = (itemName) => {
    // Use an arrow function to mutate data
    setData(data =>
        // Use map to map over all items
        data.map(item => {
            // Leave other items the way they are
            if (item.name !== itemName) return item;
            // Return a modified copy of our target item
            // where we changed the qty field
            return { ...item, qty: item.qty + 1 };
        }));
}
于 2021-08-01T14:27:17.153 回答