React useEffect调用axios获数报Functions are not valid as a React child警告

1. 你在组件返回的渲染逻辑中，错误对services数组的map方法做了赋值操作，而非调用map遍历生成JSX。代码中services.map = (data) => {...}的写法实际是将匿名函数赋值给数组的map属性，最终返回给React的渲染内容是这个函数，而React不支持将函数作为子元素渲染，因此抛出对应警告。
2. 即使你修正了赋值的问题，当前map的回调函数也无法返回有效JSX：你使用大括号包裹回调逻辑，但没有编写return语句，最终遍历得到的数组元素全是undefined，无法渲染出预期内容。
3. 还有一处潜在问题：列表遍历生成的元素没有添加唯一key属性，修复上述问题后还会触发React的列表key警告。

按以下步骤修改代码即可修复问题：

• 删除services.map后的赋值符号=，改为正常调用数组map方法：services.map(回调函数)
• 调整map回调函数的返回逻辑：可以用小括号包裹JSX实现隐式返回，也可以保留大括号并添加return语句显式返回JSX
• 为每个遍历生成的h3元素添加唯一key属性，优先使用接口返回的每条数据的唯一id作为key，无唯一id时可暂时用数组下标兜底（不推荐长期使用下标作为key）

修正后完整代码 #

import { useState, useEffect } from 'react';
import axios from 'axios'
const rest_base = wpbpressdata.rest_url
const api = rest_base + '/services'

const ServicesCategory = () => {
    const [services, setServices] = useState(null)
    useEffect( () => {
        axios.get( api )
            .then( (res) =>{ 
                setServices(res.data) 
            })
    }, [] )
    return(
            services === null ? 'loading' : services.map((data) => (
                <h3 key={data.id}>{data.service_name}</h3>
            ))
    )
}
export default ServicesCategory

内容的提问来源于stack exchange，提问作者Tick Twitch