为什么数组可以返回空?

嗨,我是新来的人,我正在尝试使用onSelect返回与该名称关联的项目数组。我正在使用点过滤器方法来过滤数组,以便仅显示具有与所选名称相同的键的项。但是我的数组返回空。

class HorizantScroller extends React.Component {

  state = {
    selected: 'Brands',
    statelist: [
  {name: "Brands",
    items: ["1", "2", "3"]
  },
  {name: "Films",
    items: ["f1", "f2", "f3"]
  },
  {name: "Holiday Destination",
    items: ["f1", "f2", "f3"]
  }
]

  };



  onSelect = key => {
    this.setState({ selected: key });
    const myList = this.state.statelist;
    const myItemDetails = myList.filter(items=>items.key === key);
    console.log(myItemDetails)

  }


  render() {
    const { selected } = this.state;
    // Create menu from items
    const menu = Menu(this.state.statelist, selected);
    const {statelist} = this.state;


    return (
      <div className="HorizantScroller">
        <ScrollMenu
          data={menu}
          arrowLeft={ArrowLeft}
          arrowRight={ArrowRight}
          selected={selected}
          onSelect={this.onSelect}
        />

      <Items Items={Items[selected]}/>

      </div>

    );
  }
}

export default HorizantScroller;
评论
  • 自作孽
    自作孽 回复

    根据您的数据结构,您需要使用use item.name来检查selectedKey

    myList.filter(items=>items.name === key);
    

    注意:您必须确保在过滤数组后不要更新stateList状态,否则状态将丢失数据

    相反,您必须使用另一个状态变量来存储过滤列表或在渲染时应用过滤器,而不是将过滤后的值存储在状态中