Question

我正在尝试构建一个基于cookie来自动更新值的组件：

let cookies = 0;
(function count() {
cookies = document.cookie.split("?");
setTimeout(count, 10);
return cookies;
})();


class CartButton extends React.Component {
    state = {quantity: cookies.length}
    render() {
      return (
        <Cart onClick={e=>{show_cart()}}>
    <Mfont>{this.state.quantity}</Mfont>
    <Icon>shopping_cart</Icon>
    </Cart>
      );
    }
  }

'count'函数按预期工作，使用返回的最新值呈现组件。不幸的是，当更改“ cookies”时，它不会自动更新。它返回此错误：

警告：render（...）：用新的根组件替换React渲染的子代。如果要更新此节点的子代，则应该让现有的子代更新其状态并渲染新组件，而不是调用ReactDOM.render。

我在这里尝试了各种变体，但仍然无法弄清楚：/

Answer 1

这里，尽管计数正常，但CartButton仍未更新，因为CartButton没有监听您的cookies变量。仅当props或state发生更改时，React组件才会更新。你可以这样。.

class CartButton extends React.Component {
    state = {quantity: cookies.length}

    componentDidMount(){
      setInterval(function count() {
        cookies = document.cookie.split("?");
       this.setState({quantity: cookies})
      }.bind(this), 10)
    }
    render() {
      return (
        <Cart onClick={e=>{show_cart()}}>
          <Mfont>{this.state.quantity}</Mfont>
          <Icon>shopping_cart</Icon>
        </Cart>);
    }
  }

Answer 2

componentDidMount仅在组件首次加载时执行一次。这是编写在页面加载后需要执行的任何逻辑的正确位置。

尝试一下

class CartButton extends React.Component {
    //It is good to have a constructor for the component which has state
    constructor(props){
      super(props);
      this.state = {quantity: cookies.length}
      this.updateQuantity;
    }

    componentDidMount(){
      this.updateQuantity = setInterval(()=> {
        cookies = document.cookie.split("?");
       this.setState({quantity: cookies.length})
      },10)
    }
    //Don't forget to clear any setInterval like below
    componentWillUnmount(){
       clearInterval(this.updateQuantity);
    }
    render() {
      return (
        <Cart onClick={e=>{show_cart()}}>
          <Mfont>{this.state.quantity}</Mfont>
          <Icon>shopping_cart</Icon>
        </Cart>);
    }
  }

反应组件中的自动更新值

2 个答案: