Question

我已经集成了搜索过滤器并使用基于搜索词的post方法检索了json数据（对象数组）。 json输出如下：

[
  {"taxi_code":"CT0001","class":"0"},
  {"taxi_code":"CT0002","class":"0"},
  {"taxi_code":"CT0003","class":"0"}
]

但即使使用map方法，json数据也不会呈现给DisplayTable组件。我做错了什么？使用console.log(<DisplayTable data={queryResult} />），我得到了这种类型的输出：Object { props={...}, _store={...}, $$typeof=Symbol {}, more...}

class Results extends Component
{
      constructor(props){
                 super(props);
                 this.state={searchTerm:''};       
      }
      render(){
          return(<div id="results" className="search-results">
                  {this.props.data}
                  <SearchInput className="search-input" onChange={e=>this.searchUpdated(e)} />
                 </div>);
      }
      searchUpdated (e) {
          this.setState={searchTerm: e};
          var queryResult;
          axios.post(config.api.url + 'public/getAttributesbyname', {'searchTerm':e,'name':this.props.data})
              .then(response => {

               var queryResult = response.data;
              render()
              {

              return (<DisplayTable data={queryResult}/>);
              }
              })
              .catch(response => {

              });
      }
  }

 class DisplayTable extends Component
 {
    render()
    {
        return this.props.data.map((alldata)=> {
            return <div className="station">{alldata.taxi_code}</div>;
        });
    }
 }

Answer 1

您的代码中有几处错误，

您无法从异步函数（axios.post）
this.setState是方法，您必须将其称为this.setState()但不为其指定值

我认为在这种情况下，您不需要输入字段searchTerm中的句柄状态，您可以从输入中获取值并使用它。但是您应该处理从服务器获取的数据的状态。

我重构了你的例子，现在它看起来像这样

class Results extends Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
  }

  render(){
    return <div id="results" className="search-results">
      <DisplayTable data={ this.state.data } />
      <SearchInput 
        className="search-input" 
        onChange={ e => this.searchUpdated(e) } 
      />
    </div>;
  }

  searchUpdated (e) {
    axios
      .post(config.api.url + 'public/getAttributesbyname', {
        searchTerm: e.target.value, 
        name: this.props.data 
      })
      .then(response => {
        this.setState({ data: response.data });
      })
     .catch(response => {});
  }
}

class DisplayTable extends Component {
  render() {
    const stations = this.props.data.map((alldata, index) => {
      return <div className="station" key={ index }>{ alldata.taxi_code }</div>;
    });

    return <div>{ stations }</div>
  }
}

从对象数组渲染数据

1 个答案: