尝试在 React Native 中更新数组对象

Question

为了简单起见，我制作了一个较短的版本。我知道这里的一些代码是错误的。我花了几个小时尝试不同的方法，但无法使任何东西起作用，所以我把它剥离了。

目的：我正在渲染一个 FlatList。我需要能够通过单击每个特定 FlatList 项目中的按钮来更新数组中每个相应对象中的 'qty'。

所以，如果我在'abc'中点击'Increase QTY'，那么'qty'的数据就会增加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;

Answer 1

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

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

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

您的 incQuantityHandler 本身是不正确的。我建议重新阅读 React 文档并学习数组 destructuring/spreading，但你可能想要这样的东西：

// 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 };
        }));
}

尝试在 React Native 中更新数组对象

Trying to update array object in React Native

javascript

reactjs

react-native

flatlist