Question

在尝试在日志中设置简单搜索后，显示以下内容：

一切似乎都很好并且标准化了，所以几次搜索我仍然不知道为什么会发生此错误。

我尝试使用提取和相同的结果

请让别人澄清一下，为什么会发生此错误？

代码：

import React, { Component } from "react";
import axios from "axios";

import Suggestions from "./suggestions";

class Search extends Component {
  constructor(props) {
    super(props);

    this.state = {
      term: "",
      error: false,
      results: []
    };
  }

  onChange(e) {
    this.setState(
      { term: e.target.value },

      () => {
        axios
          .get("/search?q=" + this.state.term)
          .then(res => this.setState({ results: res.data }))
          .catch(() => this.setState({ error: true }));
      }
    );
  }

  render() {
    return (
      <div id="searchbox">
        <div>
          <form>
            <input
              ref={input => {
                this.search = input;
              }}
              value={this.state.term}
              onChange={this.onChange.bind(this)}
              type="text"
              placeholder="Search..."
            />

            <button type="submit">
              <i className="search icon" />
            </button>
            <Suggestions results={this.state.results} />
          </form>
        </div>
      </div>
    );
  }
}

export default Search;

建议

import React from "react";

const Suggestions = props => {
    const resultList = props.results.map(r => <li key={r.id}>{r.title}</li>);
    return <ul>{resultList}</ul>;
};

export default Suggestions;

响应

Answer 1

res.data将为您提供整个已解析的JSON响应，但是您需要使用posts属性值的数组。

axios
  .get("/search?q=" + this.state.term)
  .then(res => this.setState({ results: res.data.posts }))
  .catch(() => this.setState({ error: true }));

Answer 2

您需要使用IMO

Net::FTP::Recursive::parse_files

而不是

axios
          .get("/search?q=" + this.state.term)
          .then(res => this.setState({ results: res.data.posts }))
          .catch(() => this.setState({ error: true }));

React，this.props.results.map不是函数

2 个答案: