Javascript 如何在axios请求后显示项目名称

在通过axios请求获取项目名称后，我尝试显示项目名称（此处项目是一种成分）。我不明白我需要做什么来“返回”项目名称

Axios返回项目的名称没有任何问题，因此我尝试使用

return{response.data.name}

显示它，但没有显示任何内容

我只是有这样一条消息：“期望在arrow函数中返回一个值”

清单被调用（props.recipe.ing_list=[“whateverid”，“whateverid]”）：

我尝试这样显示项目的名称：

    const ListIng = props => (
        props.list.map((item) => {
            axios.get('http://localhost:4000/ingredient/' + item)
            .then(response => {
                return <p>{response.data.name}</p>
            })
            .catch(function (error) {
                console.log(error)
            })
        })
    )

const list=props=>(
道具列表地图（（项目）=>{
axios.get（）http://localhost:4000/ingredient/“+项目）
。然后（响应=>{
返回{response.data.name}

})
.catch（函数（错误）{
console.log（错误）
})
})
)

---

这是我的第一篇帖子，所以如果有什么我可以改进的地方，请毫不犹豫地告诉我；-）

您正在从

返回值。然后是
回调函数。返回值将被传递到嵌套
。然后
如果有，但不会用作功能组件的返回值

当您使用异步调用时，应该使用state，让React知道数据已经准备好，组件应该重新呈现。您可以使用React钩子来实现这一点，如下所示（未测试，作为提示使用）

const list=props=>{
const[data，setData]=useState（[]）；//初始数据将是空数组
道具列表地图（（项目）=>{
axios.get（）http://localhost:4000/ingredient/“+项目）
。然后（响应=>{
setData（e=>（[…e，response.data.name]）；//在每个响应上-用新数据填充数组
})
.catch（函数（错误）{
console.log（错误）
})
})
//数据到达时显示结果数组
返回{data.map（d=>（{{d}
}））}
}
通常api调用应该在componentDidMount（）生命周期方法中

import React,{Component} from 'react';


const ListIng extends Component {
    state={name:null};

    componentDidMount() {
    this.props.list.map((item) => {
            axios.get('http://localhost:4000/ingredient/' + item)
            .then(response => {
                this.setState({name:response.data.name});
            })
            .catch(function (error) {
                console.log(error)
            })
        })
    }   

    render() {
    return(
        <p>{this.state.name}</p>
    );
    }
};

import React，{Component}来自'React'；
常量列表扩展了组件{
状态={name:null}；
componentDidMount（）{
this.props.list.map（（项）=>{
axios.get（）http://localhost:4000/ingredient/“+项目）
。然后（响应=>{
this.setState（{name:response.data.name}）；
})
.catch（函数（错误）{
console.log（错误）
})
})
}   
render（）{
返回(
{this.state.name}

);
}
};

import React,{Component} from 'react';


const ListIng extends Component {
    state={name:null};

    componentDidMount() {
    this.props.list.map((item) => {
            axios.get('http://localhost:4000/ingredient/' + item)
            .then(response => {
                this.setState({name:response.data.name});
            })
            .catch(function (error) {
                console.log(error)
            })
        })
    }   

    render() {
    return(
        <p>{this.state.name}</p>
    );
    }
};