React.js中调用.slice方法报错slice is not a function问题求助

slice 是JavaScript数组的专属实例方法，报 .slice is not a function 错误，说明你代码中调用该方法的 commands 变量实际不是数组类型。

• 接口返回结构不符合预期：比如后端返回的是 {code: 200, data: [...], msg: "success"} 这类嵌套对象，你直接取了根对象赋值给 commands，没有取内部的数组字段
• 初始值设置错误：commands 对应的状态初始值设为了 null、undefined 或空对象，异步请求还没返回就触发渲染，此时非数组类型调用slice直接报错
• 请求异常分支处理不当：接口请求失败后，你给 commands 赋值了错误对象、字符串等非数组类型的值

首先给代码增加数组类型校验，避免非数组类型调用方法触发报错，修改后代码如下：

{Array.isArray(commands) ? commands.slice(0, limit).map((command) => (
    <TableRow
        hover
        key={command._id}
    >
    <TableCell>
         {command.title}
    </TableCell>
    <TableCell>
         {moment(command.date).format('DD/MM/YYYY')}
    </TableCell>
</TableRow>
)) : null}

之后按以下步骤排查根本问题：

1. 打印axios请求返回的完整响应内容，确认数组字段的层级是否正确，比如接口返回的数组在响应体的data字段下，你需要取res.data.data赋值给commands，而不是直接取res或res.data
2. 检查commands状态的初始值，务必显式设置为空数组，示例：const [commands, setCommands] = useState([])
3. 补全请求异常分支的处理，就算请求失败也给commands赋值为空数组，不要赋值非数组类型的值

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