尝试将axios数据放入带有返回函数的变量中，但不起作用(React)

scyqe7ek 于 2022-11-23 发布在 iOS

关注(0)|答案(2)|浏览(116)

import React from "react";
import ReactDOM from "react-dom";
import { createRoot } from 'react-dom/client';
import axios from "axios";

const BASEURL = "https://jsonplaceholder.typicode.com/users";

function axiosTest() {
    return axios.get(BASEURL).then(response => response.data)
}

function stepTwo(){
axiosTest()
        .then(data =>{
           
           var namesArray = data;
           //console.log(namesArray);
          return namesArray;
        })
    }

function Component1(){

var array2map = stepTwo();

console.log(array2map);
return(
    <div>
    {array2map.map(item => <p>item.name</p>)}
        </div>
    )

}



const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);

为什么array2map返回为undefined？这是它在控制台日志中说的，也是它在我试图Map未定义的东西时得到的错误中说的。这是我的问题，我不知道我还能再详细描述它多少，但这个站点迫使我写更多。

axios

来源：https://stackoverflow.com/questions/74334723/trying-to-put-axios-data-in-a-variable-with-a-return-function-not-working-reac

2条答案

按热度按时间

z9ju0rcb1#

因为您没有从stepTwo函数返回任何内容。

赞(0）回复(0）举报 2022-11-23

wgxvkvu92#

在此应注意两点：
首先，stepTwo不返回任何内容，它包含的return语句用于then回调。回调在stepTwo返回undefined之后**运行。
第二，函数组件顶层的任何东西，比如var array2Map = stepTwo()，都是在组件挂载之前运行的，而fetch调用比如axios，应该在组件挂载之后进行。
这里有一个解决方案。

async function axiosTest() {
    var response = await axios.get(BASEURL);
    return response.data;
}

async function stepTwo() {
    let data = await axiosTest();
    return data;
}

class Component1 extends Component {

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

    async componentDidMount() {
        this.setState({array2Map: stepTwo()});
    }

重要建议：命名在编程中是非常重要的。给你的变量、方法和组件给予个合适的名字。stepTwo不做任何事情，而axiosTest已经做了。后者可以直接使用。我猜你的axios调用会返回一个名称列表。在这种情况下，你可以使用names代替array2Map。

赞(0）回复(0）举报 2022-11-23

我来回答

尝试将axios数据放入带有返回函数的变量中，但不起作用(React)

2条答案

相关问题

热门标签

最新问答