时间戳

首页 > 解决方案 > 为什么数组可能返回空？

javascript - 为什么数组可能返回空？

问题描述

嗨，我是新手，我正在尝试使用 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;

标签： javascriptarraysreactjs

解决方案

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

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

注意：您必须确保在过滤数组后没有更新 stateList 状态，否则您的状态将丢失数据

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

推荐阅读