方法未检索更新的状态

Question

在这个文件中，我从API中提取了一堆数据并将其分配给"baseData"数组。在另一个文件中，我有一个调用 generateResults 方法的 onkeyup 事件。但是 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>
        )
}
}
}

调用生成结果方法的另一个类中的方法。

  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>