Estoy tratando de hacer una lista de resultados de la API de Wikipedia, pero solo puedo representar el primer elemento de la matriz.
Aquí hay un ejemplo de respuesta y mi código:
["perro","Perro","Carne de perro","Dogecoin","Perros en guerra","Raza de perro","Entrenamiento de perros","Placa de identificación","Doggystyle","Palacio Ducal"," Tarde de perros"],["","","","","","","","","","",""],["https://en.wikipedia.org/ wiki/Perro","https://en.wikipedia.org/wiki/Dog_meat","https://en.wikipedia.org/wiki/Dogecoin","https://en.wikipedia.org/wiki/ Perros_en_guerra","https://en.wikipedia.org/wiki/Dog_breed","https://en.wikipedia.org/wiki/Dog_training","https://en.wikipedia.org/wiki/Dog_tag" ,"https://en.wikipedia.org/wiki/Doggystyle","https://en.wikipedia.org/wiki/Doge%27s_Palace","https://en.wikipedia.org/wiki/Dog_Day_Afternoon" ]]
fetchingData() { if (this.state.query === ''){ this.setState({result: []}) } else { const url = 'https://en.wikipedia.org/w/api.php?action=opensearch&origin=*&search=' + this.state.query; axios.get(url) .then(res => this.setState({result: [res.data]})) } } <div> {this.state.result.map(function(item, index){ return( <ul> <li><a href={item[3][index]} target="_blank" key={index}>{item[1][index]}</a></li> </ul> ) })} </div> Any idea on how I can show a list of all the results?No envuelva su res.data dentro de una matriz. Solo {result: res.data}
import React from "react"; import { render } from "react-dom"; import axios from "axios"; class App extends React.Component { constructor(props) { super(props); this.state = { result: [], query: "" }; this.handleChange = this.handleChange.bind(this); this.fetchingData = this.fetchingData.bind(this); } handleChange(e) { this.setState({ query: e.target.value }); } fetchingData() { if (this.state.query === "") { this.setState({ result: [] }); } else { const url = "https://en.wikipedia.org/w/api.php?action=opensearch&origin=*&search=" + this.state.query; axios.get(url).then((res) => this.setState({ result: res.data })); } } componentDidMount() { this.fetchingData(); setTimeout(() => {}, 200); } render() { const key = this.state.result[1]; // name const value = this.state.result[3]; // link const mergedResults = key && key.map(function (x, i) { return { result: x, link: value[i] }; }) return ( <div id="main"> <input id="input" placeholder="search" value={this.state.query} onChange={this.handleChange} ></input> <button id="search" onClick={this.fetchingData}> Search </button> <div> <ul> {mergedResults && mergedResults.map((item, i) => ( <li key={i}> <a href={item.link}>{item.result}</a> </li> ))} </ul> </div> </div> ); } } render(<App />, document.getElementById("root"));aquí está mi solución, ejemplo de trabajo en vivo aquí https://codesandbox.io/s/react-basic-class-component-forked-s0qoe
explicación del código: solo mapeo las matrices de resultados 1 y 3 aquí
const key = this.state.result[1]; // name const value = this.state.result[3]; // link const mergedResults = key && key.map(function (x, i) { return { result: x, link: value[i] }; })luego mapéalo
<ul> {mergedResults && mergedResults.map((item, i) => ( <li key={i}> <a href={item.link}>{item.result}</a> </li> ))} </ul>