Javascript 更改用于在React中显示的集合

我有一个react应用程序，可以从json文件中获取产品，我在页面顶部添加了两个按钮，这样每个按钮都可以显示json状态的数据

所以有菜单1状态，菜单2和活动列表，我做了两个功能

  Active1() {
    this.setState({ activelist: !this.state.items });
  }

  Active2() {
    this.setState({ activelist: !this.state.items2 });
  }

切换它们的按钮是

   <button className="changebutton" onClick={this.Active1}>
            Menu 1
          </button>
          <button className="changebutton" onClick={this.Active2}>
            Menu2
          </button>

菜单1
菜单2

这将在单击时显示活动列表，即menu1和menu2，但它不起作用

文件名 Itemlist.js

（您可能需要单击沙盒中的刷新按钮）

创建第三个数组（可能是

activeList

），然后只需调用按钮上的函数，单击该函数即可将

项

或

项2

复制到

activeList

中。最后，将呈现方法中对

项的所有引用替换为
activeList
。以下是缩写代码：

class ItemList extends React.Component {
  state = {
...
    items: [],
    items2: [],
    activelist: [],
  };

  componentDidMount() {
    dataPromise.then(
      result => {
        this.setState({
          isLoaded: true,
          items: result,
          activelist: result
        });
      },
...
    );

    dataPromise2.then(
      result2 => {
        this.setState({
          isLoaded: true,
          items2: result2
        });
      },
...
    );
  }

  constructor(props) {
    super(props);
...
    this.Active1 = this.Active1.bind(this); // ADDED
    this.Active2 = this.Active2.bind(this); // ADDED
  }
...
  Active1() {
    this.setState({ activelist: Object.assign({}, this.state.items) }); //CHANGED
  }

  Active2() {
    this.setState({ activelist: Object.assign({}, this.state.items2) }); //CHANGED
  }

  render() {
...
      return (
        <div>
          <button className="changebutton" onClick={this.Active1}>
            Menu 1
          </button>
          <button className="changebutton" onClick={this.Active2}>
            Menu2
          </button>
...
      );
    }
  }
}

class ItemList扩展了React.Component{
状态={
...
项目：[]，
项目2:[]，
活动列表：[]，
};
componentDidMount（）{
那么(
结果=>{
这是我的国家({
isLoaded：是的，
项目：结果，
活动列表：结果
});
},
...
);
dataPromise2.then(
结果2=>{
这是我的国家({
isLoaded：是的，
项目2：结果2
});
},
...
);
}
建造师（道具）{
超级（道具）；
...
this.Active1=this.Active1.bind（this）；//添加
this.Active2=this.Active2.bind（this）；//已添加
}
...
Active1（）{
this.setState（{activelist:Object.assign（{}，this.state.items）}）；//已更改
}
活性2（）{
this.setState（{activelist:Object.assign（{}，this.state.items2）}）；//已更改
}
render（）{
...
返回(
菜单1
菜单2
...
);
}
}
}

这是一个codesandbox:
codesandbox上出现了一些错误，那么您试图实现什么，在一个api调用成功后，您需要调用另一个api，这是您的问题？我试图以一种方式执行此操作，如果我单击菜单1，它将显示正常的data1 api 1 datapromise1，当点击按钮2时，它会显示数据2 api 2 DataPromise2。那么问题是什么，问题是代码框中出现了一些错误。你能解决这个问题吗。检查该问题将很有帮助。现在的问题是什么呢？创建第三个数组（可能是
activeList
），然后简单地调用按钮上的函数，单击该函数可以将
项
或
items2
复制到
activeList
。最后，将render方法中对
项的所有引用替换为
activeList
@DILEEPTHOMAS，因为我已经修复了代码框