Javascript 如何检测状态是否已更改？反应

我有以下代码：

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
要素：[]，
}
}
加载数据=（）=>{
取（'http://localhost:3001/')
.then（res=>res.json（））
.then（data=>{this.setState（{elements:data}）}）
.catch（err=>console.log（err））
}
新元素=（）=>{
执行{this.loadData（）}同时（/不知道在这里放什么/==this.state.elements.length）
componentDidMount（）{
这是loadData（）；
console.log（this.state.feladatok）
}
render（）{
返回(
this.newElement（）}/>
);
}
}
//元素组件渲染更多的元素组件。所有元素组件内部看起来如下所示：
//
//如果已创建新元素，则将执行两项操作：
//将新元素添加到数据库中
//调用this.props.newElem（）函数时，可以使用递归而不是循环

以下是一个例子：

loadData = () => {
    fetch('http://localhost:3001/')
    .then(res => res.json())
    .then(data => {
        this.setState(prevState => {
           if(prevState.elements.length === data.elements.length){
               // New element not retrieved, try again.
               this.loadData();
           }
           return {elements: data}
        });
    })
    .catch(err => console.log(err))
  }

您可能必须使用一个布尔标志来告诉您是否加载了数据。您还应该在屏幕上显示某种加载，以便用户知道幕后正在发生某些事情。因此，有了新的州标志，您的代码将类似于以下内容：

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      elements: [],
      dataLoaded: false,
    }
  }
  loadData = () => {
    fetch('http://localhost:3001/')
    .then(res => res.json())
    .then(data => {this.setState({elements: data, dataLoaded: true })})
    .catch(err => console.log(err))
  }
    newElement = () => {
        this.setState({dataLoaded: false}, () => {
            this.loadData();
        })
    }

  componentDidMount(){
    this.loadData();
    console.log(this.state.feladatok)

  }
  render() {
    return (
      dataLoaded ? <div className="App">
        <Element newElem={() => this.newElement()}/>
      </div> : <div>Loading......</div>
    );
  }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
要素：[]，
数据加载：false，
}
}
加载数据=（）=>{
取（'http://localhost:3001/')
.then（res=>res.json（））
.then（data=>{this.setState（{elements:data，dataLoaded:true}）}）
.catch（err=>console.log（err））
}
新元素=（）=>{
this.setState（{dataload:false}，（）=>{
这是loadData（）；
})
}
componentDidMount（）{
这是loadData（）；
console.log（this.state.feladatok）
}
render（）{
返回(
数据加载？
this.newElement（）}/>
：装载。。。。。。
);
}
}
不清楚您想做什么。你为什么使用循环？您需要多次调用
this.loadData（）
，还是使用它等待数据加载？如何使用
newElement
？我假设它不会在未设置状态时重复获取数据……我有嵌套组件（重新创建调用）。如果我从主元素（上面的函数所在的位置）向下创建了一个新元素5级，我会告诉那里的服务器，然后带着道具一直向上传递到主元素，以调用函数
newElement
。但是它在服务器处理新元素之前被调用。以及
loadData
中获取的所有元素。所以我使用循环一次又一次地获取，直到函数检测到接收数据长度的变化。那么新元素将作为道具传递给子组件？您可以在这里添加完整的组件代码，以便可以轻松查看您正试图实现的目标。我很确定您不需要在这里使用do while循环。听起来您可能需要在
newElement
中使用async/Wait来等待
loadData
的返回，但是很难说，问题和代码都不清楚。