Question

在ReactJs应用中，下面的演示中使用了caption。当前，即使在初始负载下，它也要等待10秒钟，相反，它应该立即调用，然后在10秒钟后再次调用。我该如何实现？

setInterval

Answer 1

尝试添加另一个useEffect()，仅触发一次：

useEffect(() => {
  callApiAfterOneSec();
}, []);

Answer 2

您可以将其用作类组件

class App extends React.Component {

      interval;
      constructor() {
        super()
        this.state = {
          data: {}
        }
      }
      componentDidMount() {
        this.loadData();
        this.interval = setInterval(this.loadData, 5000);
      }

      componentWillUnmount() {
        clearTimeout(this.interval);
      }

      async loadData() {
        try {
          const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
          await res.json().then(res => {

            this.setState({
              data: res
            })
          })
        } catch (e) {
          console.log(e);
        }
      }

      render() {
        return (
          <div>
            <ul>
              <li>UserId : {this.state.data.userId}</li>
              <li>Title : {this.state.data.title}</li>
              <li>Body : {this.state.data.body}</li>
            </ul>
          </div>
        );
      }

    }
    render(<App />, document.getElementById('root'));

如@xadm所述，您可以根据要求简单修复两次使用效果

useEffect(() => {
  callApiAfterOneSec();
}, []);

Answer 3

这只是一种可以解决您问题的技巧。

const [rendered, setRendered] = useState(false);

useEffect(() => {
  let interval = null;
  if(rendered) interval =  setInterval(callApiAfterOneSec, 10000)
  setRendered(true);

  return () => {
    clearInterval(interval)
  }
}, [post, rendered])

使用ReactJS中的钩子调用功能组件中的setInterval

3 个答案: