React父子组件传递Axios数组报错：map不是函数

我通过Axios发起GET请求从C#后端获取数组，Postman和控制台都能看到正常的数组返回，但前端子组件调用props.allAccounts.map()时报错props.allAccounts.map is not a function，用forEach也报同样错误。相关代码如下：

后端接口代码 #

// GET: api/<SettingsController>
[HttpGet]
public IActionResult Get()
{
    try
    {
        return Ok(_repo.GetAccounts().ToList());
    }
    catch (Exception)
    {
        return BadRequest();
    }
}

父组件代码 #

const SettingsPage = () => {
    const [allAccounts, setAllAccounts] = useState("");
    useEffect(() => {
        axios.get("https://localhost:9000/api/settings").then((response) => {
          setAllAccounts(response.data);
        });
      }, []);
    return (
                <Table type="הגדרות"  allAccounts = {allAccounts} selectAccount = {selectAccount}/>
    )
}

export default SettingsPage

子组件代码 #

const Table = (props) => {
    const [allAccounts, setAllAccounts] = useState([]);
    useEffect(()=>{
        setAllAccounts(props.allAccounts);
    },[])
    return (
                    {allAccounts.map((account) =>{
                        <TableRow account = {account} />
                    })}
    )
}

export default Table

控制台返回结果 #

(2) [{…}, {…}]
0
: 
{id: 3, name: null, dateCreated: '2023-06-14T13:52:18.2417005', supervisorId: 1, supervisor: null, …}
1
: 
{id: 4, name: 'Wise-code', dateCreated: '2023-06-14T14:05:23.9261187', supervisorId: 2, supervisor: null, …}
length
: 
2
[[Prototype]]
: 
Array(0)

问题原因 #

1. 父组件初始状态错误：父组件把allAccounts初始化为字符串""，组件首次渲染时子组件拿到的是字符串类型，而字符串没有map/forEach方法，直接调用就会报错。
2. 子组件状态同步失效：子组件的useEffect依赖为空数组，仅在组件挂载时执行一次。后续父组件获取到数组并更新allAccounts后，子组件不会同步更新内部的allAccounts状态。
3. map回调无返回值：子组件中map的回调函数没有返回<TableRow>元素，即便解决前两个问题，也不会渲染出列表项。

解决方案 #

1. 修正父组件初始状态

将父组件的allAccounts初始化为空数组，避免首次渲染传递字符串：

const SettingsPage = () => {
    // 初始化为空数组而非字符串
    const [allAccounts, setAllAccounts] = useState([]);
    useEffect(() => {
        axios.get("https://localhost:9000/api/settings").then((response) => {
          setAllAccounts(response.data);
        });
      }, []);
    return (
        <Table type="הגדרות" allAccounts={allAccounts} selectAccount={selectAccount}/>
    )
}

export default SettingsPage

2. 优化子组件状态逻辑

推荐直接使用props传递的值，减少不必要的内部状态维护，同时补全map的返回值并添加唯一key：

const Table = (props) => {
    return (
        {props.allAccounts.map((account) => (
            // 添加key属性，避免React警告
            <TableRow account={account} key={account.id} />
        ))}
    )
}

export default Table

如果确实需要维护子组件内部状态，需给useEffect添加依赖项，确保props更新时同步状态：

const Table = (props) => {
    const [allAccounts, setAllAccounts] = useState([]);
    // 添加props.allAccounts作为依赖，同步状态更新
    useEffect(()=>{
        setAllAccounts(props.allAccounts);
    },[props.allAccounts])
    return (
        {allAccounts.map((account) => (
            <TableRow account={account} key={account.id} />
        ))}
    )
}

export default Table

内容的提问来源于stack exchange，提问作者Ofir Kadosh