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

Question

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

Axios 返回项目的名称没有任何问题，所以我尝试显示它，return <p>{response.data.name}</p>但没有显示任何内容。

我有这条消息：“预期在箭头函数中返回一个值”

ListIng 被调用 (props.recipe.ing_list = ["whateverid", "whateverid"]) ：

<td><ListIng list={props.recipe.ing_list} /></td>

我试着用这个来显示项目的名称：

    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)

            })

        })

    )

这是我的第一篇文章，所以如果有什么我可以改进的地方，请不要犹豫告诉我 ;-)