显示来自 Api Call React 的信息答案

【问题标题】：Display Information from Api Call React显示来自 Api Call React 的信息
【发布时间】：2020-07-14 02:31:56
【问题描述】：

我是 React 新手，并试图显示来自 Merriam Webster 的 Api Call 的原始数据。我已成功更新状态并在控制台中收到信息。但是，我不确定如何在页面上显示它。任何帮助表示赞赏。这是我的代码：

import React, {Component} from 'react';
import MerriamAPI from '../services/MerriamAPI';

class Search extends Component {

state = {
  word: '',
  info: [],
}

handleChange = (event) => {
  this.setState({word:event.target.value.toLowerCase()})
}


handleSubmit = async (e) => {
  e.preventDefault();
  var word = this.state.word.trim();
  const data = await MerriamAPI.getWordInfo(word);
  this.setState({info: data})
  console.log(this.state.info[0].shortdef)
}
render (){
    return (
      <form onSubmit={this.handleSubmit}>
      <div>
        <input type="text" onChange={this.handleChange}/>
        <button type="submit">Search</button>
        <p>
          {this.state.info.map((info) => <p key={info[0].meta.id}>{...info}</p>)} 
        </p>
      </div>
      </form>
    );
  }
}

export default Search;

来自 Merriam Webster API 的数据。我正在尝试显示shortdef。

【问题讨论】：

你能上传data 的样子吗？
我刚刚添加了一张数据图片。我正在尝试显示“shortdef”

标签： reactjs forms api state

【解决方案1】：

随着组件状态的更新，您的组件将被重新渲染。

所以你只需要编写你的组件来显示你想要的东西

...
render (){
    return (
      <form onSubmit={this.handleSubmit}>
      <div>
        <input type="text" onChange={this.handleChange}/>
        <button type="submit">Search</button>
        <p>
          {this.state.info}
        </p>
        <p>{this.state.word}</p>
      </div>
      </form>
    );
  }
}

如果你想显示数据数组，你可以这样做


render () {
  return (
    ...
    // assume each element in someArrayData is unique and not an object.
    <div>{this.state.someArrayData.map(item => <p key={item}>{item}</p>)}</div>
  )
}

https://reactjs.org/docs/state-and-lifecycle.html
https://reactjs.org/docs/lists-and-keys.html#keys

【讨论】：

谢谢，我尝试了一些修改，但无法弄清楚。您的解释是有道理的，但现在我认为这是因为我没有正确映射数据。我添加了一张图片以供参考。这是我尝试过的代码：{this.state.info.map((info) => {...info})}
你能描述一下info 的样子吗？如果是对象，则不会正确渲染。
嗨@gnujoow，这是我正在使用的数据的链接。有多个数组和对象。 dictionaryapi.com/api/v3/references/collegiate/json/…
如果您只想使用其键打印出特定的字符串。或者如果你想打印出对象的所有成员，使用JSON.stringify() 是最简单的方法。

【解决方案2】：

你可以试试这个。

render (){
    return (
      <form onSubmit={this.handleSubmit}>
      <div>
        <input type="text" onChange={this.handleChange}/>
        <button type="submit">Search</button>
        <p>
          {this.state.info.length ? this.state.info.map((item, key) => (
            <p key={key}>{item.shortdef}</p>)
          )) :null} 
        </p>
      </div>
      </form>
    );
  }
}

【讨论】：

嗨@Majid 我试过了，但我得到了这个错误：TypeError: Cannot read property 'meta' of undefined
你可以这样做 1.{item.shortdef}) 或 2.{this.state.info.length ? this.state.info.map((item, key) => ({item.shortdef}))) :null}