方法未检索到更新后的状态

Question

在此文件中，我将从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()
  }

Answer 1

因为您应该将带有双括号的任何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>