Отображение информации из Api Call React - PullRequest
Новая
       9

Отображение информации из Api Call React

0 голосов
/ 14 июля 2020

Я новичок в React и пытаюсь отобразить необработанные данные из вызова API для слов от Merriam Webster. Я успешно обновил состояние и получаю информацию в консоли. Однако я не уверен, как отобразить его на странице. Любая помощь приветствуется. Вот мой код: 

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. введите описание изображения здесь

Ответы [ 2 ]

0 голосов
/ 14 июля 2020

вы можете попробовать это. 

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>
    );
  }
}
0 голосов
/ 14 июля 2020

ваш компонент будет повторно визуализирован по мере обновления состояния компонента.

поэтому вам просто нужно написать свой компонент только для отображения того, что вы хотите 

...
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

...