在 React js 中使用 useState 更新数据

Question

I am new to react. I have faced one issue and not able to solve it. I am looking for your help. I have an array which I have listed below. All data are looped and displayed in the view. From my current array, I want to update the count of dietry array[] which is inside the fruits array.

This is my useState

const [foods, setFood] = useState(fruits)

if I console.log(foods) it gives data as below.

fruits: [
    {
        id: 1,
        name: 'Banana',
        family: 'abc',
        price: 2.99,
        isEnabled: true,
        dietary: [
            {
                id:1,
                disabled: false,
                group: null,
                selected: false,
                text: 'N/A',
                value: '858090000',
                count:0
            },
            {  
                id:2,
                disabled: true,
                group: null,
                selected: true,
                text: 'N/A',
                value: '80000',
                count:0
            },
        }

This data are looped in a view page and there is onClick handleIncrement method which should increment the count of dietary array of index 0 or index1 etc whichever index sent from handleIncremnt() method. This is my method

const handleIncrementCount = (dietary_index) => {
    setFood(foods =>
        foods.map((food,index) =>
         dietary_index === food[index] ? {...food, qty:food.count+1}:food
        )
    );
}

I am not able to increase the count, in my view page counts are 0 even if i click the increment button.It shows some error within map

Any help is highly appreciated

I ma looking for a solutions

Answer 1

There are a few issues with your handleIncrementCount function. Firstly, you are trying to use the dietary_id parameter to find the correct food object to update, but you are using it to access the index property of the food object instead. This will always return undefined, and so the function will not be able to find the correct object to update.

Secondly, you are trying to update the qty property of the food object, but this property does not exist in the food object. Instead, you need to update the count property of the correct dietary object inside the food object.

Here is how you can fix these issues:

const handleIncrementCount = (dietary_id) => {
    setFood(foods =>
        foods.map(food => {
            // Find the dietary object with the correct id
            const dietary = food.dietary.find(d => d.id === dietary_id);

            // If the dietary object was found, increment its count
            if (dietary) {
                dietary.count += 1;
            }

            // Return the updated food object
            return food;
        })
    );
};

With this change, the handleIncrementCount function should be able to find the correct food object and update the count property of the correct dietary object.

Note that this function is using the Array.prototype.map() and Array.prototype.find() methods to transform the foods array and find the correct dietary object to update. These methods are commonly used in JavaScript to transform and find elements in arrays. It is worth reading up on these methods and understanding how they work in order to better understand this code.