React js - 在初始渲染后更新项目列表

Question

我对反应还很陌生（angular 背景），我正在尝试呈现一个项目列表，单击按钮后这些项目将更新为新项目。关于下面的代码，显示了初始列表（2 条记录），但是，在 onClick 之后我可以看到 console.log 消息，但呈现的项目没有改变。这个实现有问题吗？

注意：我使用 .net 进行服务器端渲染。

var Foo = React.createClass({
items: [
    '<h1>Initial Item 1</h1>', 
    '<h1>Initial Item 2</h1>'
],
getItems: function () {
    return this.items;
},
getMoreItems: function() {
    console.log('Retrieving more items..');

    // To eventually be replaced with async call for more data
    this.items.push('<h1>Additional Item 1</h1>');
    this.items.push('<h1>Additional Item 2</h1>');
    this.items.push('<h1>Additional Item 3</h1>');
},
render: function() {
    return (
        <div>
            {
                this.getItems().map(function(item) {
                    return (
                        <div dangerouslySetInnerHTML={{__html: item}} />
                    );
                })
            }

            <button className="more btn btn-info" onClick={this.getMoreItems}>
                Get more items...
            </button>
        </div>
    );
}
});

Answer 1

您需要使用组件的状态。

只要 React 组件的状态或 props 发生变化，它们就会自动重新渲染。 this.setState({items: items}) 在您的 getMoreItems 方法中，与 this.state.items 在您的 getItems 方法中匹配应该可以解决问题。

但请务必不要直接更改状态。如果您想将新项目推入状态，请与单独的数组交互，然后使用相同的 this.setState 语句设置它。即，做 而不是 做：this.state.items.push().

React js - 在初始渲染后更新项目列表

React js - updating a list of items after initial render

.net

server-side

reactjs