Question

我正在尝试动态创建 React 元素，但我似乎无法正确使用this.props。我目前拥有的不会产生任何新元素。我试过看其他各种答案并模仿它们但没有任何运气。

React.createClass({
getDefaultProps: function() {
    var items = [];
    chrome.storage.local.get(null, function(result) {
        var keys = Object.keys(result);
        // get all the keys from chrome storage and add to array items
        for (var i = 0; i < keys.length; i++) {
            items.push(keys[i]);
        }
    })
    return {
        items: items
    }
},
render: function() {
    // display an element with name of key
    return (
        <div>
        {this.props.items.map(function loop(item, i) {
            return (<div>{item}</div>)
        })}
        </div>
    )
}
})

然而，当我用this.props.items替换文字数组时，我得到了新的元素。我在这里缺少什么想法？

Answer 1

chrome.storage是异步的：

它与批量读写操作异步，因此比阻塞和串行localStorage API更快。

这意味着getDefaultProps在呼叫回来之前完成，初始状态为{ items: [] }。要解决此问题，请在'componentDidMount'中向存储区发出请求，并在数据到达时设置状态：

React.createClass({

    getDefaultProps: function() {
        return {
            items: [] // initial is empty
        }
    },

    componentDidMount: function() { // the component has be rendered for the 1st time
        chrome.storage.local.get(null, function(result) { // receive the items
            var keys = Object.keys(result);
            // get all the keys from chrome storage and add to array items
            for (var i = 0; i < keys.length; i++) {
                items.push(keys[i]);
            }

            this.setState({ items: items }); // set the state
        }.bind(this)) // bind the callback to the component's this, so you can use this.setState
    },

    render: function() {
        // display an element with name of key
        return (
            <div>
            {this.props.items.map(function loop(item, i) {
                return (<div>{item}</div>)
            })}
            </div>
        )
    }

})

如何使用React映射道具创建新元素

1 个答案: