React前端如何从Django REST API获取JSON数据存入变量

async 修饰的函数永远返回Promise对象，你在组件顶层同步执行let columnFromBackend = getData()的时候，网络请求还未完成，JS不会阻塞代码等待接口返回，所以此时拿到的必然是pending状态的Promise，而非实际接口数据。
你在getData函数内部console.log(data)能打印出正确结果，是因为那行代码在await之后执行，此时请求已经完成；但函数外的console.log(columnFromBackend)是调用getData后立刻同步执行的，此时请求还没返回，自然拿不到目标数据。
React 中异步获取接口数据不能用普通顶层变量接收返回值，必须通过状态管理存储异步请求结果。

用 React 官方提供的 Hooks 管理请求状态，步骤如下：

• 用useState定义存储列数据的状态，初始值对齐你硬编码的对象结构即可，同时可配置加载态避免请求未完成时组件报错
• 用useEffect在组件首次挂载时触发接口请求，不要在组件渲染函数顶层直接调用异步请求，否则每次组件重渲染都会重复发起请求
• 接口请求成功拿到数据后，调用状态的setter方法将数据存入状态，后续在react-beautiful-dnd的拖拽逻辑中直接读取该状态值即可，效果和硬编码完全一致

函数组件参考代码：

import { useState, useEffect } from 'react';
// 保留你原有的react-beautiful-dnd相关导入

function DragBoard() {
  // 定义列数据状态，初始值可传空对象，和硬编码结构对齐
  const [columnFromBackend, setColumnFromBackend] = useState({});
  // 加载状态，避免请求未完成时dnd组件拿到空值报错
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchColumnData = async () => {
      try {
        const response = await fetch("http://127.0.0.1:8000/api/column_names/");
        if (!response.ok) throw new Error('接口请求异常');
        const data = await response.json();
        // 如果后端返回结构和你硬编码的结构有差异，在这里做格式转换后再存入状态
        setColumnFromBackend(data);
      } catch (err) {
        console.error('获取列数据失败：', err);
      } finally {
        setLoading(false);
      }
    };

    fetchColumnData();
    // 空依赖数组表示仅在组件首次挂载时执行一次请求
  }, []);

  // 请求未完成时渲染加载提示
  if (loading) return <div>数据加载中...</div>;

  // 后续onDragEnd等拖拽逻辑中，直接使用columnFromBackend即可，和硬编码用法完全一致
  const onDragEnd = (result) => {
    // 你的原有拖拽逻辑，直接读取、修改columnFromBackend后通过setColumnFromBackend更新即可
  };

  return (
    // 你原有的react-beautiful-dnd渲染逻辑，将之前硬编码的列对象替换为columnFromBackend状态
    <></>
  );
}

export default DragBoard;

• 不要尝试在组件渲染函数顶层直接写await getData()接收值，组件渲染函数本身不支持直接标记为async，顶层await会阻塞整个组件渲染，不符合React的渲染逻辑
• 存入状态前务必确认后端返回的JSON结构和你硬编码的结构完全一致，若存在字段名不匹配、嵌套层级差异，先在set状态前做格式转换，否则会导致dnd组件运行报错
• 拖拽回调中如果需要修改列数据，必须通过setColumnFromBackend更新状态，不要直接修改状态变量本身，否则视图不会同步更新

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