Значение автоматического обновления в компоненте реакции
Я пытаюсь создать компонент с автоматически обновляемым значением на основе файлов 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 работает должным образом, компонент отображается с последним возвращенным значением. К сожалению, он не обновляется автоматически при изменении файлов cookie. Он возвращает эту ошибку:
Warning: render(...): Replacing React-rendered children with a new root component. If you intended to update the children of this node, you should instead have the existing children update their state and render the new components instead of calling ReactDOM.render.
Я пробовал разные варианты здесь, но до сих пор не могу понять: /
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Здесь ваш CartButton не обновляется, хотя count работает нормально, потому что CartButton не слушает вашу переменную cookies. Компонент React обновляется только тогда, когда происходит изменение props или state.
Можно как-то так..
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>);
}
}
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>);
}
}
У вас есть песочница/рабочий пример/codepen для этого?