Javascript 反应组件不渲染_Javascript_Reactjs_Url_Preview

Javascript 反应组件不渲染

javascript reactjs url

Javascript 反应组件不渲染,javascript,reactjs,url,preview,Javascript,Reactjs,Url,Preview,所以我们有一个HTML页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>The Great: Page of Life</title> </head> <body> <div style="width: 100%;&qu

所以我们有一个HTML页面

<!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>

此部分的控制台输出为因此，在我尝试设置它之后，状态似乎仍然未定义

在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>
    );
}

render（）{
让itemsInCart=this.state.itemsInCart；
log（“itemsInCart”，itemsInCart）；
返回(

{Object.values（this.state.itemsInCart.map）（v=>}
);
}

渲染中console.log的输出是原始状态，而不是未定义状态。任何指针都非常有用

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)
        }
    );
}

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>
    );
}