React - 修改屬性時如何使用鍵在數組中的特定對象上設置狀態？

Question

我創建了一個菜單卡，它將為數組中的每個對象顯示一張卡。 該對象保存有關該菜單項的詳細信息。 我希望影響該菜單項的一個屬性，但我不確定如何潛在地使用密鑰或 id 來僅影響該項目。 如何根據鍵或其他一些唯一標識符從數組中動態選擇對象？

現在作為替代，我使用 handleCategory 來影響數組中的第一個對象。 我希望根據我使用的物品卡影響對象。

下面是我的代碼的樣子（基本示例）：

主頁.js

import React, { Component } from 'react';
import { Form, Button } from 'react-bootstrap';
import Items from './items'
import Navbar from './navbar'

class Home extends Component {
    constructor() {
        super();
        this.state = {
            value: 'enter',
            condimentCount: 5,
            menuItems: [
                {
                    "id": 1234,
                    "item_name": 'chow mein',
                    "category_id": 'meal'
                },
                {
                    "id": 1235,
                    "item_name": '',
                    "category_id": 'meal'
                }
            ]
        };
            this.handleCategory = this.handleCategory.bind(this);
    }



    handleCategory = (event, id) => {
        console.log('changing meal type', event.target.value)
        //this.setState({value: event.target.value});

        // 1. Make a shallow copy of the items
         let items = [...this.state.menuItems];
        // 2. Make a shallow copy of the item you want to mutate
         let item = {...items[0]};
        // 3. Replace the property you're intested in
         item.category_id = event.target.value;
        // 4. Put it back into our array. N.B. we *are* mutating the array here, but that's why we made a copy first
         items[0] = item;
        // 5. Set the state to our new copy
         this.setState({menuItems: items});
    }



    render() {

        let menuItems = null;
        if (this.state.menuItems) {
            menuItems = (
                <div>
                    {
                        this.state.menuItems.map((item, i) => {
                            return <div key={i}>
                                <MenuItem
                                    key={item.id} //IS THIS CORRECT?
                                    item_name={item.item_name}
                                    category_id={item.category_id}
                                    handleCategory={this.handleCategory}
                                />
                            </div>
                        })
                    }
                </div>
            )
        }

        return (

            <div>
                <Navbar />
                <div>
                    {Items}
                </div>


            </div>
        );
    }
}

export default Home;

項目.js

import React, { Component } from 'react';
import classes from './items.module.css'

const Items = (props) => {


    return (
        <div className={classes.cards}>
                <form>
                    <label>
                        What kind of meal item is this (e.g. meal, drink, side):
                        <select value={props.category_id} onChange={props.handleCategory}>
                            <option value="meal">meal</option>
                            <option value="drink">drink</option>
                            <option value="side">side</option>
                        </select>
                    </label>
                </form
        </div>
    )
}

export default Items;

Answer 1

我不太確定您在handleCategory嘗試做handleCategory ，但我理解您的問題，我相信。

您可以使用map的索引來訪問handleCategory的菜單項。

this.state.menuItems.map((item, i) => {
  return <div key={i}>
    <MenuItem
      item_name={item.item_name}
      category_id={item.category_id}
      handleCategory={e => this.handleCategory(e, i)}
    />
  </div>
})