Question

使用React.js我编写了一个简单的应用程序，它获取json并使用返回的一些数据来构建html。

虽然，当JSON发生变化时，html却没有。我在这里错过了什么吗？

这是我的代码 -

<script type="text/jsx">

var classNames = ({
    'auditNumber': "auditNumber",
    'audit-overview-box': "audit-overview-box"
});

var AuditOverviewBox = React.createClass({
    render: function () {
        return (
            <div className="audit-overview-box">
                <h1 className={classNames.auditNumber}>{this.props.auditNo}</h1>

                <span>{this.props.creationDate}</span>

            </div>
        )
    }
});


var AuditBoxes = React.createClass({

    getInitialState: function () {
        return {
            data: []
        }
    },

    componentWillMount: function () {
        this.dataSource();
    },

    componentWillReceiveProps: function (nextProps) {
        this.state.data(nextProps);
    },

    dataSource: function (props) {
        props = props || this.props;

        return $.ajax({
            url: '../json.php',
            dataType: 'json',
            cache: false,
            success: function (data) {

                this.setState({data: data});
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },


    render: function () {
        var data = this.state.data;
        console.log("data");


        var photos = data.map(function (audit) {
            return <AuditOverviewBox key={audit.auditNo.toString()} auditNo={audit.auditNo}
                                     creationDate={audit.creationDate}/>
        });

        return (
            <div className='myAudits'>
                {photos}
            </div>
        )
    }
});

ReactDOM.render(<AuditBoxes />, document.getElementById('audits-div'));
</script>

和JSON -

[{
    "auditNo": "a1201",
    "creationDate": "21/10/2016"
},
{
    "auditNo": "a1221",
    "creationDate": "21/10/2016"
},
{
    "auditNo": "a1211",
    "creationDate": "21/10/2016"
}]

Answer 1

您无法将更改从服务器推送到浏览器（除非您使用websockets）。如果您只需要偶尔更新一次，则应该围绕ajax请求设置代码，使其每n秒执行一次请求。最简单的解决方案是使用setInterval()

setInterval(
  function () {
    // your ajax code
  },
  5000
)

这样，对服务器的请求将每5秒完成一次。请注意，如果您将间隔设置为短/拥有大量访问者，则可能会使服务器超载。

Answer 2

只有两种方法可以更改数据。您可以使用.setState方法或直接将数据设置为.state属性并调用组件的.forceUpdate方法，但这种方法是非常不推荐的。您可以在此处详细了解：https://facebook.github.io/react/docs/state-and-lifecycle.html

react.js如何知道数据已发生变化？

2 个答案: