我希望能夠通過過濾顯示我從數據庫中提取的項目，但我無法根據需要提取數據。 我正在使用 Reactjs

Question

我希望能夠通過過濾顯示我從數據庫中提取的項目，但我無法根據需要提取數據。 這是我從.json 中提取數據的部分。 我可以獲取項目數據，獲取他們的 ID，但我無法從附加項中提取數據。

onClickEvent = async (dispatch, id, e) => {
        
    const item_extra = await axios.get(`http://localhost:3001/item_extra/?item_id=${id}`);
    console.log(item_extra.data);
    var extra_ids = [];
    item_extra.data.forEach( (elem) => {
        extra_ids.push(elem.extra_id);
        
    });
    console.log(extra_ids)
    dispatch({
        type: "GET_EXTRAS",
        payload: extra_ids
    });

    this.setState({
        isVisible: !this.state.isVisible,
    })
    
    
}

---

視圖看起來像

            {
                value => {
                    const { dispatch } = value;
                    console.log(this.state.extras);
                    return (

                        <div className="card" >
                            <div className="col-sm-6">
                                <img className="card-img-top" width="150" height="100" src={image} alt="Card "></img>
                                <div className="card-body">
                                    <h5 className="card-title">{name}</h5>
                                    <p className="card-text">Price: {price} €</p>
                                    <h5><span className="badge badge-pill badge-warning" onClick={this.onClickEvent.bind(this, dispatch, id)}>Buy</span></h5>
                                </div>

                                {
                                    isVisible ? <form>
                                        
                                        {extras.map((elem, key) => 
                                    
                                                <div className="card-body">
                                                    <label>{key}</label>
                                                    <label hidden>{key}</label>
                                                    <label hidden>{elem.id}</label>
                                                    <label>{elem.extra_name}</label>
                                                    <input className="extras" type="checkbox"></input>
                                                    <span>{elem.extra_price}</span>
                                                </div> 
                                        )}

                                    </form> : null
                                }
                            </div>
                        </div>

                    )
                }
            }
        </ItemConsumer>

---

我正在過濾的部分

case "GET_EXTRAS":
            
            
        return {
            ...state,
            extras: state.extras.filter(extra => action.payload=== extra.id)
        }

---

[{…}] 0：{} 長度：1原型：數組（0）

Answer 1

action.payload是一個 id 數組，因此您需要檢查所有 id 以獲得額外信息

case "GET_EXTRAS":

  return {
     ...state,
       extras: state.extras.filter(extra => action.payload.includes(extra.id) )
  }