显示来自 api 调用的搜索结果 - 仅在控制台中显示 - React答案

【问题标题】：Show search results from api call - only showing in Console - React显示来自 api 调用的搜索结果 - 仅在控制台中显示 - React
【发布时间】：2021-11-26 02:06:19
【问题描述】：

我是 JavaScript/React 的新手，在尝试从 API 呈现搜索结果时遇到问题。它只显示在控制台中，而不显示在 HTML 中。

import React from 'react';

class TestJS extends React.Component {
  constructor(props) {
      super(props);
      this.state={
          value:'',
          value2:'',
          resultFound : true,
          filteredData : ""
      };

      this.handleChange=this.handleChange.bind(this);
      this.domainChange=this.domainChange.bind(this);
      this.search=this.search.bind(this);
      this.multiFilter=this.multiFilter.bind(this); 
  }
   
  
    multiFilter(filters) {
      const filterKeys = Object.keys(filters);
     // filters all elements passing the criteria
      return Object.values((item) => {
          // dynamically validate all filter criteria
          return filterKeys.every(key => !!~filters[key].indexOf(item[key]));
      });
  }

  handleChange(event){
      this.setState({value:event.target.value});
  }

  domainChange(event) {
      this.setState({value2:event.target.value});
  }
  
  search(){
      let _this = this;
      let {value, value2 } =this.state;
      const url=`https://exampleapi.com/search=?$user{value2}&domain=${value}`;

      fetch(url,{
          method:'GET'
      })
     
      .then(response => response.json())
          .then(function(data){
              console.table(data, value, value2);
              let filters = {
                  "domain" : [value],
                  "user" : [value2]
              };
              let  filtered = _this.multiFilter(data, filters);
              console.table(filtered);
              
              if(filtered.length <= 0){
                _this.setState({resultFound : false})
              }
              else{
                _this.setState({filteredData : filtered, resultFound : true})
              }
              
          });
          
  }
  
 
   render() {
      return (
          <div>
              <form >
                  <div className="row">
                      <div className="col-md-4">
                          <select value={this.state.value} onChange={this.handleChange} className="form-control" placeholder="Enter user">
                              <option selected>Choose...</option>
                              <option value="tree">TREE</option>
                              <option value="forest">FOREST</option>
                              <option value="apple">APPLE</option>
                              <option value="ground">GROUND</option>
                              <option value="flowers">FLOWERS</option>
                              <option value="grass">GRASS</option>
                          </select>
                      </div>
                      <div className="col-md-4">
                          <div className="form-group is-empty">
                              <input placeholder="Enter user" className="form-control" value={this.state.value2} onChange={this.domainChange}/>
                              <span className="material-input"></span></div>
                      </div>
                      <div className="col-md-4">
                          <button type="button"
                                  className="btn btn-primary btn-block"
                                  onClick={()=> this.search()}
                          >Search</button>
                      </div>
                      {!this.state.resultFound ? <div> No Data Found!!</div> : 
                        JSON.stringify(this.state.filteredData)}
                  </div>
              </form>
          </div>
          
      )
      
  }
}

export default TestJS;

我知道这可能非常容易解决，但是我花了很多时间试图找出我的代码中的问题，而且作为一个没有指导的新手，这很难实现。提前致谢

【问题讨论】：

标签： javascript reactjs json api

【解决方案1】：

我对代码有一些建议：

1- FilteredData 应该是一个数组？如果是这样，您应该将状态初始化为空数组

2- 找到的结果可能不是必需的，因为如果 filtersData.length === 0 并且您没有使用负载，您可以实现相同的结果

3- 我确定 JSON.stringify 在那里使用

【讨论】：

【解决方案2】：

我注意到在您的状态下，您将过滤数据初始化为字符串，但通过查看您的代码，它似乎是一个对象。

而不是像这样初始化它

filteredData : ""

试着改成这个

filteredData : {}

【讨论】：