使用useState、useEffect Hooks获取数据更新状态时报错如何解决

错误原因 #

• 赋值对象错误：你当前直接将GraphQL返回的外层result.data对象赋值给了预期存储数组的submissions状态，而你查询得到的提交列表实际存储在result.data.submissionsList字段中，Table组件接收到非数组类型数据后，内部执行遍历/类型转换操作时触发报错。
• 无异常兼容逻辑：未处理请求失败、查询语法错误等异常场景，这类场景下result.data可能为undefined或null，同样会触发类型错误。

修复代码 #

export default function Dashboard() {
    const [submissions, setSubmissions] = useState([]);
    // 可选：添加加载状态避免无数据时异常渲染
    const [loading, setLoading] = useState(true);
  
    useEffect(() => {
      async function loadData() {
        try {
          const query = `query {submissionsList {
             user_id type quantity impact date}
            }`;
          const response = await fetch ('http://localhost:8000/graphql', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json'},
            body: JSON.stringify({ query })
          });
          const result = await response.json()
          // 取对应字段赋值，兼容异常场景默认赋值空数组
          setSubmissions(result?.data?.submissionsList || []);
        } catch (err) {
          console.error('数据加载失败:', err)
          setSubmissions([])
        } finally {
          setLoading(false)
        }
      }
      loadData();
    }, []);
  
    return (
        <Grid container spacing={4}>
          <Grid item xs={12}>
            <Widget>
              {/* 加载完成后再渲染Table，避免初始状态异常 */}
              {!loading && <Table data={submissions} />}
            </Widget>
          </Grid>
        </Grid>
    )
}

补充说明 #

如果修复后仍出现报错，可以在setSubmissions前打印result确认返回结构，检查GraphQL查询是否存在语法错误导致返回数据不符合预期。

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