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

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

})