Question

我有这段代码：

＆＃13;

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      elements: [],
    }
  }
  loadData = () => {
    fetch('http://localhost:3001/')
    .then(res => res.json())
    .then(data => {this.setState({elements: data})})
    .catch(err => console.log(err))
  }
    newElement = () => {
    do {this.loadData()} while (/don't know what to put here/ === this.state.elements.length)


  componentDidMount(){
    this.loadData();
    console.log(this.state.feladatok)

  }
  render() {
    return (
      <div className="App">
        <Element newElem={() => this.newElement()}/>
      </div>
    );
  }
}

//The Element component renders more Element components. All element component looks like this inside:
//<Element newElem={this.props.newelem} />
//If a new element has created, that will do two things:
//Adds a new element to the database
//The this.props.newElem() gets called

＆＃13;

情况是，只要创建了一个新组件（并将其发布到数据库），就会从子组件的props中调用newElement。我需要等到服务器响应新数据。数据以数组形式出现。（大约10毫秒，但我认为等待时间更好）。上面显示的代码是我的想法，以检测元素长度是否与以前相同。但是如果我创建一个新状态，例如elementsCounter（并将空值设置为0），无论我将其设置为elements.length，它仍然保持为0.或者如果我将变量声明为newElement函数，并将值设置为this.state.elements.length，在执行do...while之后，它会创建一个无限循环。那么如何解决这个问题？

Answer 1

您可以使用递归而不是循环。

以下是一个例子：

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))
  }

Answer 2

您可能必须使用布尔标志来告诉您数据是否已加载。您还应该在屏幕上显示某种加载方式，以便用户知道场景后面发生了一些事情。因此，使用新的状态标志，您的代码看起来与此类似：

if (cin.fail())
{
    cout << "Invalid time input."<<endl;
    cout<<"Please try again."<<endl<<endl<<endl;
    cin.clear();
    cin.ignore();
    return false;
}

如何检测状态是否发生了变化？ reactjs

2 个答案: