Reactjs 使用promise值对循环进行响应

我正在努力解决一个问题。我想我需要能够在axios之外的for循环中使用状态长度。目前，当我用数值替换LEN时，下面的代码起作用，但如果我尝试使用label.length，则不会起作用，因为调用for循环时该值不存在。有谁能建议最好的处理方法吗？ 我的代码是粗糙的，因为我是js新手，并且没有反应

    export default function App() {
      const [label, setLabel] = useState([]);
      const handle = useFullScreenHandle();
      const [data, setData] = useState([]);
      const token = fetch('token');
      const headers = {
        'X-CSRF-Token': token,
        'Authorization': 'Basic '+btoa('cred')  
      }
    
      React.useEffect(() => {
        axios
          .get("url", {
            headers: headers
          })
          .then(result => {
            setLabel(Object.keys(result.data).map(key => result.data[key].title));
            setData(Object.keys(result.data).map(key => result.data[key].nid));
            len=label.length
          });
      }, []);
    
    
    console.log(length)
      for (let i = 0; i < **LEN**; i++) {
        i = Number(i)
        lab = label[i];
        dat = data[i];
        var stri = ({id:String(i), category: 'cat', label:"String(i)"+i});
    
        //JSON.stringify({artist: artist, title : title});
        nodes.push (stri);
        var ed = ({id:String(i),source:String(i),target:String(i+1),label:i});
        edges.push(ed);
    
      }
    
      var datada =  ({nodes: nodes, edges:edges});
let element = 
<>
 <Sigma graph={datada}></Sigma>
  return element
</>
}

导出默认函数App（）{
const[label，setLabel]=useState（[]）；
const handle=useFullScreenHandle（）；
const[data，setData]=useState（[]）；
const token=fetch（'token'）；
常量头={
“X-CSRF-Token”：令牌，
‘授权’：‘基本’+btoa（‘信用’）
}
React.useffect（（）=>{
axios
.get（“url”{
标题：标题
})
。然后（结果=>{
setLabel（Object.keys（result.data）.map（key=>result.data[key].title））；
setData（Object.keys（result.data）.map（key=>result.data[key].nid））；
len=标签长度
});
}, []);
console.log（长度）
for（设i=0；i<**LEN**；i++）{
i=数量（i）
lab=标签[i]；
dat=数据[i]；
var stri=（{id:String（i），类别：“cat”，标签：“String（i）”+i}）；
//stringify（{artist:artist，title:title}）；
节点推送（stri）；
var-ed=（{id:String（i），源：String（i），目标：String（i+1），标签：i}）；
边缘。推（ed）；
}
var datada=（{nodes:nodes，edges:edges}）；
let元素=
返回元素
}

只要在for循环中获取长度，就不会引起任何问题

导出默认函数App（）{
const[label，setLabel]=useState（[]）；
......
React.useffect（（）=>{
axios
.get（“url”{
标题：标题
})
。然后（结果=>{
setLabel（Object.keys（result.data）.map（key=>result.data[key].title））；
setData（Object.keys（result.data）.map（key=>result.data[key].nid））；
//len=label.length为防止不必要地重新创建
datada
并导致不必要的重新渲染，请使用
usemo
创建
datada

const datada = useMemo(() => {
  const nodes = [];
  const edges = [];

  for (let i = 0; i < label.length; i++) {
    i = Number(i)
    lab = label[i];
    dat = data[i];
    var stri = ({ id: String(i), category: 'cat', label: "String(i)" + i });

    nodes.push(stri);
    var ed = ({ id: String(i), source: String(i), target: String(i + 1), label: i });
    edges.push(ed);
  }

  return { nodes: nodes, edges: edges };
}, [data, label]);

这将确保同时更新
lable
和
data
，防止
datada
被重新创建两次。
感谢您的回复。您上面建议的代码确实有效。但潜在的问题仍然存在。当我试图在.then循环结束后调用label.length时，我继续看到以下行为。在页面的第一次运行中，label.length为零。在axios调用之后，此值是一个数字（339，但不管怎样）。但是，for循环使用这两个值中的第一个，因此运行0次。我想知道是否有人可以建议如何允许label.length返回第二个值？
import { unstable_batchedUpdates } from "react-dom";

// code omitted
.then(result => {
  unstable_batchUpdates(() => {
    setLabel(Object.keys(result.data).map(key => result.data[key].title));
    setData(Object.keys(result.data).map(key => result.data[key].nid));
  });
});