问题描述
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8" />
<title>The Great: Page of Life</title>
</head>
<body>
<div style="width: 100%;">
<div id="shopping-cart-container": 100%;"></div>
<div id="preferences-container"></div>
</div>
<div style="clear:both"></div>
</body>
</html>
import React from 'react';
import { render } from 'react-dom';
import { MainShoppingCartComponent } from './ShoppingCart.jsx';
import { MainComponent } from '../Popup/Popup.jsx';
import './index.css';
render(<MainShoppingCartComponent />,window.document.querySelector('#shopping-cart-container')
);
render(<MainComponent />,window.document.querySelector('#preferences-container'));
MainComponent 没有任何麻烦并按预期进行交互。 但是 MainShoppingCartComponent 根本不呈现。当我尝试打印出不同的步骤时,我发现它卡在了 componentDidMount 函数中。
import React from 'react';
import './ShoppingCart.css';
import { ReactTinyLink } from 'react-tiny-link'
export class MainShoppingCartComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
itemsInCart: {},};
}
componentDidMount = () => {
let { itemsInCart } = this.state.itemsInCart;
chrome.storage.sync.get(
"shopping_Cart",function (result) {
console.log("what was returned from local storage",result);
console.log("what the current state is",itemsInCart);
this.setState({ itemsInCart: result },() => { console.log("woohoo") });
console.log(this.state.itemsInCart)
}
);
}
此部分的控制台输出为 因此,在我尝试对其进行设置后,该状态似乎仍未定义。
在 MainShoppingCartComponent 的末尾,当我尝试渲染某些内容时
render() {
let itemsInCart = this.state.itemsInCart;
console.log("itemsInCart",itemsInCart);
return (
< div className='cart-class' >
<div id="cart_container">
{Object.values(this.state.itemsInCart).map(v => <CartItemComponent url={v}/>}
</div>
<span id="pop-button" className="waves-effect btn" title="Click to empty cart" onClick={this.changedisplay}></span>
</div>
);
}
渲染中 console.log 的输出是原始状态 而不是 undefined。任何指针真的很感激
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)