Question

我很反应（角度背景），我正在尝试渲染一个项目列表，这些项目将在点击按钮时使用新项目进行更新。关于下面的代码，显示初始列表（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组件就会自动重新渲染。 this.setState({items: items})方法中的getMoreItems与this.state.items方法中的getItems匹配，可以解决问题。

请确保不要直接更改状态。如果要将新项目推送到状态，请与单独的数组进行交互，然后使用相同的this.setState语句进行设置。即，不执行：this.state.items.push()。

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

1 个答案: