Question

我的问题很简单，但我错过了这个过滤过程的某些部分。我试图将我的组件状态设置为我给我的复选框输入的任何值，并且只有在点击事件后该值与API中的数据数组匹配时才返回我的状态。

虽然它在我的Chrome控制台中正确记录了数据，但我一直在努力将我的记录数据设置为我的组件状态而没有任何成功......

我的最终目标是：

第1部分 - 在单击事件后输出组件状态中的正确数据。

第2部分 - 取消选中输入后获取初始数据。

第3部分 - 如果选中多个复选框，则能够输出多个数据。

第1部分代码

  handleFilterButtons = (event) => {
  var valueInput = event.target.value;
  var apiFilters = `https://backend.greatsaigon.com/api/v1/en/venues`;
  axios.get(apiFilters)
    .then( (response) =>{
      this.setState({
        result: response.data.filter((req) => {
          if (req.options.beauty.hair.treatment !== "0") {
            req.options.beauty.hair.treatment.filter((res) => {
              if (res === valueInput) {
                  console.log(req)
                }
              })
            } 
          })
        })      
    })
  .catch(function (error) {
    console.log(error);
  })
}

Answer 1

我不认为你想在这里使用的功能是过滤器。过滤器内的返回值是布尔值，但您在另一个过滤器中使用过滤器。但是，您可以使用forEach，因为您可以成功控制值，您可以使用此值并将其推送到可添加到您所在州的变量。

axios.get(apiFilters)
    .then( (response) =>{

        let result=[];
          response.data.forEach((req) => {
          if (req.options.beauty.hair.treatment !== "0") {
            req.options.beauty.hair.treatment.forEach((res) => {
              if (res === valueInput) {
                  result.push(req);
                }
              })
            } 
          })
        this.setState({results:results});   
    })
  .catch(function (error) {
    console.log(error);
  })

使用Axio＆amp; amp;过滤API反应

1 个答案: