React调用API获取搜索结果仅控制台显示 无法渲染到页面问题

具体错误点 #

• 过滤函数multiFilter的实现存在根本性错误：
  1. 函数定义仅声明了filters一个入参，调用时传入的接口返回数据data没有被接收，完全没有参与过滤逻辑
  2. 错误调用Object.values()传入回调函数，未对目标数组执行过滤操作，导致返回值永远为无效空值，因此setState后页面没有可渲染的有效内容
• 附加可优化问题：
  1. 状态初始化时filteredData被设为空字符串，后续赋值为数组，类型不统一容易引发长度判断异常
  2. 请求URL的模板字符串插值语法错误，$user{value2}不符合JS模板字符串规范，需按实际接口参数规则调整

修正后完整代码 #

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); 
  }
   
  // 修正：增加待过滤数组入参，替换为正确的filter逻辑
  multiFilter(array, filters) {
    const filterKeys = Object.keys(filters);
    // 对传入的数组执行过滤
    return array.filter((item) => {
        // 动态校验所有过滤条件
        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;
      // 此处URL按你实际接口参数规则调整插值写法
      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>
                      {/* 如果需要结构化展示，可替换下方的JSON.stringify为列表渲染逻辑 */}
                      {!this.state.resultFound ? <div> No Data Found!!</div> : 
                        JSON.stringify(this.state.filteredData)}
                  </div>
              </form>
          </div>
      )
  }
}

export default TestJS;

可选优化：结构化渲染结果 #

如果不想在页面显示JSON字符串，可将render内的结果展示部分替换为遍历渲染：

{!this.state.resultFound ? 
  <div> No Data Found!!</div> : 
  <div className="search-result">
    {this.state.filteredData.map((item, index) => (
      // 按接口实际返回的字段调整展示内容
      <div key={index}>
        <p>用户名：{item.user}</p>
        <p>域名：{item.domain}</p>
        {/* 其他需要展示的字段 */}
      </div>
    ))}
  </div>
}

内容的提问来源于stack exchange，提问作者Ramona_hongo