Question

我试图使用react从api获取json数据并将其插入到html页面中。这是功能：

function GetApiContent() {
  let value = fetch(api2)
    .then(response => response.json())
    .then(results => {
      console.log(results.title)

      return {
        title: results.title,
        date: results.date,
        hdurl: results.hdurl,
        explanation: results.explanation,
      }
    })
    .catch(err => {
      console.log(err)
    })

  return (
    <div>
      <h3>{value.title}</h3>
    </div>
  )
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Api test</h1>
          <Hola message="hello" />
        </header>

        <GetApiContent />
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    )
  }
}

控制台日志工作并返回标题，但当我在函数中返回它时，它会在网页中显示h3标记empty。

Answer 1

fetch是一个基于Promise的异步操作，它不会立即返回值。它返回Promise。这就是您的代码无法正常工作的原因。你基本上试图展示Promise的value属性，这不是你想要的。您希望等待Promise解析（换句话说：for fetch完成请求并解析响应）。您可以通过这种方式显示来自api的值：

const getApiContent = () => fetch(api2).then(response => response.json())

class App extends Component {
  state = {
    title: ''
  }

  componentDidMount() {
    getApiContent()
      .then(result => this.setState({ title: result.title }))
      .catch(err => console.log(err))
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Api test</h1>
          <Hola message="hello" />
        </header>
        {!!this.state.title && (
          <div>
            <h3>{this.state.title}</h3>
          </div>
        )}
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    )
  }
}

Answer 2

卢卡莱利是对的。你应该熟悉Promises。

另一个选择是使用async & await：

async function GetApiContent() {
  let value = await fetch(api2)
  ...

React fetch返回一个空值

2 个答案: