ComponentDidMount 不工作，没有错误显示

Question

class Clock extends React.Component {
state = { time: new Date().toLocaleTimeString() };
componentDidMount() {
    setInterval(() => {
        this.setState = ({ time: new Date().toLocaleTimeString()})
    }, 1000)
}
render() {
    return (
        <div className="time">
            the time is :{this.state.time}
        </div>
    );
 }
};

这是一个简单的时钟反应应用程序，其中 ComponentDidMount 不工作

Answer 1

setState 是一个函数：

this.setState({ time: new Date().toLocaleTimeString()})

setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state.

Answer 2

setState是一个函数，应该调用，而不是赋值。也不要忘记删除卸载时的计时器以防止内存泄漏这是工作示例

https://codesandbox.io/s/silent-cookies-zwsog

Answer 3

好吧，setState 将调用该组件的一些生命周期，重新渲染它并重新渲染该组件的所有子组件顺便说一句，这是一个工作示例 https://codesandbox.io/s/blazing-resonance-kjoyi

import React, { Component } from "react";

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: null
    };
    this.handleSetTime = this.handleSetTime.bind(this);
    this.timer = null;
  }
  componentDidMount() {
    this.handleSetTime();
    this.timer = setInterval(this.handleSetTime, 1000);
  }
  handleSetTime() {
    this.setState({
      time: new Date().toLocaleTimeString()
    });
  }
  render() {
    const { time } = this.state;
    return <div className="time">the time is:{time}</div>;
  }
  componentWillMount() {
    clearInterval(this.timer);
    this.timer = null;
  }
}

export default Clock;

我建议你使用 ref 到 select 一个 dom 元素并每秒更新它，这样做不会重新渲染，因为它将是一个无状态组件，它的性能会更好。

这是一个带有 ref 的状态示例 https://codesandbox.io/s/still-framework-xxxeg

import React, { Component, createRef } from "react";

class Clock extends Component {
  constructor(props) {
    super(props);
    this.ref = createRef();
    this.timer = null;

    this.handleUpdateTimer = this.handleUpdateTimer.bind(this);
  }
  componentDidMount() {
    this.handleUpdateTimer();
    this.timer = setInterval(this.handleUpdateTimer, 1000);
  }
  handleUpdateTimer() {
    this.ref.current.innerText = new Date().toLocaleTimeString();
  }
  render() {
    return (
      <div className="App">
        time is: <span ref={this.ref} />
      </div>
    );
  }
  componentWillUnmount() {
    clearInterval(this.timer);
    this.timer = null;
  }
}

export default Clock;

最后，最好的一个，使用钩子的无状态组件 https://codesandbox.io/s/silent-leftpad-cc4mv

import React, { useRef, useEffect } from "react";

const Clock = () => {
  const ref = useRef();
  useEffect(() => {
    setTimer();
    const timer = setInterval(setTimer, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);
  const setTimer = () => {
    ref.current.innerText = new Date().toLocaleTimeString();
  };

  return (
    <div className="App">
      time is : <span ref={ref} />
    </div>
  );
};

export default Clock;

ComponentDidMount 不工作，没有错误显示

ComponentDidMount not working and no error is displaying

reactjs

react-props

react-state

react-lifecycle