如何使用映射呈现Axios函数的结果

时间:2019-02-15 15:34:53

标签: javascript reactjs es6-promise

我试图在React中显示axios函数的结果。映射已经在函数中定义,但是我只能控制台记录第一个'then'

中定义的结果

我已经尝试了componentDidMount()和只是在渲染返回中进行映射,但是无法使其工作。我知道还有其他方法,例如将结果安装到状态并将状态映射到组件渲染器中,但是我试图直接从此getReactResults()函数获取结果。

const API_URL = 'https://api.testapi.com/?query=test';


const getReactResults = () => axios.get(API_URL)
    .then((res) => res.data.items)
      .then((mul) => mul.map(({name, url}) => ({
        name,
        url
      })
    )
  );

class Rel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

 componentDidMount(){
   let results = this.getReactResults();
   console.log(results);
 }

  render(){
    return(
      <div>
        <ul>
          {results.map((item, i) => <li key={i.name}>{i.name </li>)}
        </ul>
       </div>
    )
   }
}

我收到未定义“结果”的错误,但结果应显示API的结果。

1 个答案:

答案 0 :(得分:2)

您可以在诺言解决后将结果设置为组件状态,并在渲染方法中使用SendEmailRemiderToESN

this.state.results