Обновленное состояние не извлекается методом - PullRequest
Новая
       16

Обновленное состояние не извлекается методом

1 голос
/ 30 мая 2019

В этом файле я извлекаю кучу данных из API и присваиваю их массиву «baseData».В другом файле у меня есть событие onkeyup, вызывающее метод generateResults.Но тогда метод generateResults получает только исходное пустое состояние массива.Я новичок, чтобы реагировать, поэтому любая помощь приветствуется.Спасибо! 

import React from 'react';
import axios from 'axios';


export class LINKS extends React.Component{

constructor(props){
    super(props);
    this.state={
        baseData: []
}}



    getBaseData(){

        axios.get("http://localhost:3000/api/links")
        .then(response => {
            this.setState({baseData: response.data});
        }).catch((error) => {
            console.error(error);
        });


 }


    componentDidMount(){
        this.getBaseData();
    }



    generateResults(){
        var linkInfo = this.state.baseData
        var searchBar = document.getElementById('searchBar')
        console.log(linkInfo)

        for(var i = 0; i < linkInfo.length; i ++){

        }



    }



render(){
    var linkInfo = this.state.baseData

    // console.log(linkInfo)

    if(linkInfo.length === 0){
        return(
        <div><h1> Loading... </h1></div>)
    } else {

    return(



        <div>{linkInfo.map((info, i) =>
            <div>
            <u>{info['client']}</u>
            {info.links.map((link, i) =>
                <div> {link.linkTitle}
                <br/> {link.url} </div>) }
            <hr/></div>
        )}</div>



        )
}


}
}

Метод в другом классе, вызывающий метод generateResults. 

  handleSearch(){
    let links = new LINKS
    links.generateResults()
  }

1 Ответ

0 голосов
/ 30 мая 2019

Поскольку вы должны вернуть любой HTML-код в цикл отображения функции стрелки с двойными круглыми скобками, например: 

<ul>
                    {
                        this.props.items.map((item) => (
                            <li>{item}</li>
                        ))
                    }
</ul>

Я редактировал ваш код, попробуйте это: 

<div>
{
  linkInfo.map((info, i) => (
      <div>
      <u>{info['client']}</u>
      {
          info.links.map((link, i) => (
            <div> {link.linkTitle}
            <br/> {link.url} </div>
          ))
      }
      <hr/></div>
  ))
}
</div>
...