Javascript 如何在组件中设置对象数组的状态？

我从后端获取一个文件列表，并将其推送到组件状态下的对象数组（dirloc）。目前，控制台日志显示每个文件的多个dirloc日志。 一旦所有的东西都被推到dirloc，我想设置state。怎么做

    class Load extends Component {
      constructor({ props, token }) {
        super(props, token);
        this.state = {
          nodeRes: [],
          dirloc: []
        };
      }

      componentDidMount() {
        fetch("http://192.168.22.124:3000/loadit/", {
          headers: new Headers({
            authorization: `Bearer ${this.props.token}`,
            "Content-Type": "application/json"
          })
        })
          .then(response => response.json())
          .then(logit => {
            let { dirloc, nodeRes } = this.state;
            logit.map(verifypath => {
              let getpath = verifypath.substring(0, verifypath.lastIndexOf("/"));
              let dirnames = getpath
                .toString()
                .split("/")
                .pop();
              return getpath !== ""
                ? (dirloc.push({
                    getpath: getpath /* for e.g '/folder/of/files/' */,
                    dirnames: dirnames /* array of folder names */,
                    ffiles: verifypath /* full path '/folder/of/files/abc.jpg' */
                  }),
                  this.setState({ dirloc }, () => {
                    console.log(this.state.dirloc);
                  }))
                : (nodeRes.push(verifypath), this.setState({ nodeRes }));
            });
          })
          .then(getdata => this.allFetch(this.state.nodeRes));
      }

    }

    render() {
    const {  dirloc } = this.state;
    let folderView;
    for (var i = 0; i < dirloc.length; i++) {
     if (Object.entries(dirloc).length !== 0 && dirloc.constructor !== Object) {
       folderView = <Filetree fileloc={this.state.dirloc} token={this.props.token} />
    console.log(`dirs: ${dirloc[i].getpath}`)
    } else {
        folderView = null
    }
  }

类加载扩展组件{
构造函数（{props，token}）{
超级（道具、令牌）；
此.state={
节点：[]，
dirloc:[]
};
}
componentDidMount（）{
取回（“http://192.168.22.124:3000/loadit/", {
标题：新标题({
授权：`Bearer${this.props.token}`，
“内容类型”：“应用程序/json”
})
})
.then（response=>response.json（））
。然后（logit=>{
设{dirloc，nodeRes}=this.state；
logit.map（验证路径=>{
设getpath=verifypath.substring（0，verifypath.lastIndexOf（“/”）；
让dirnames=getpath
.toString（）
.拆分（“/”）
.pop（）；
返回getpath！==“”
？（直接推力）({
getpath:getpath/*用于例如“/folder/of/files/”*/，
dirnames:dirnames/*文件夹名称数组*/，
ffiles:verifypath/*完整路径“/folder/of/files/abc.jpg”*/
}),
this.setState（{dirloc}，（）=>{
console.log（this.state.dirloc）；
}))
：（nodeRes.push（verifypath），this.setState（{nodeRes}））；
});
})
.then（getdata=>this.allFetch（this.state.nodeRes））；
}
}
render（）{
const{dirloc}=this.state；
让folderView；
对于（变量i=0；i

---

编辑：问题是，当我使用条件语句渲染时，我看到控制台日志多次显示对象，这意味着它多次渲染子组件。我只想使用所有必需的对象渲染一次。

首先生成必需的值，然后在最后调用setState一次

fetch('http://192.168.22.124:3000/loadit/', {
  headers: new Headers({
    authorization: `Bearer ${this.props.token}`,
    'Content-Type': 'application/json',
  }),
})
  .then((response) => response.json())
  .then((logit) => {
    const { dirloc, nodeRes } = this.state;
    const newDirLoc = [];
    const newNodeRes = [];
    logit.forEach((verifypath) => {
      const getpath = verifypath.substring(0, verifypath.lastIndexOf('/'));
      const dirnames = getpath.toString().split('/').pop();
      getpath !== ''
        ? newDirLoc.push({
          getpath,
          dirnames,
          ffiles: verifypath,
        })
        : newNodeRes.push(verifypath);
    });
    this.setState({
      nodeRes: [...nodeRes, ...newNodeRes],
      dirloc: [...dirloc, ...newDirLoc]
    })
  });

在渲染时，检查循环之前的条件

render() {
  const { dirloc } = this.state;
  let folderView;
  if (dirloc.length) {
    for (let i = 0; i < dirloc.length; i++) {
      folderView = <Filetree fileloc={this.state.dirloc} token={this.props.token} />;
      console.log(`dirs: ${dirloc[i].getpath}`);
    }
  } else {
    folderView = null;
  }
}

render（）{
const{dirloc}=this.state；
让folderView；
if（定向长度）{
for（设i=0；i

---

已使用简单的长度检查替换Object.entries，因为dirloc是一个数组。

我已更新了我的问题。问题是，当我使用条件语句渲染时，我看到控制台日志多次显示对象，这意味着它多次渲染子组件。我只想使用所有必需的对象渲染一次。已更新使用render方法回答，尽管我不确定为什么在这里使用循环，因为除了console.log之外，块内没有使用任何循环变量。此外，根据经验法则，即使react的setState是异步的，并且在执行之前批处理所有语句，最好尽可能少地调用它，因为异步行为无法控制如果你的计算很耗时，它可能会导致多次重新渲染。我有另一个与此相关的问题，我可以在这里问吗？