Question

我的组件填充了一个数组，用于确定render函数中显示的内容（显然是componentDidMount函数）

但在更新this.state.containers时没有任何反应..我已将console.log放入第一个render循环中，该循环成功显示：

但是客户端没有任何变化，所以我不知道我的循环是否坏，但我没有JS错误。所以我不确定问题是什么，对React来说很新，所以任何帮助都会非常感谢。

var AdminForumContainer = React.createClass({
    getInitialState: function() {
        return { containers: [] }
    },
    componentDidMount: function() {
        $.ajax({
            method: 'GET',
            url: '/admin/manage/forum/populate',
            success: function(data) {
                var {containers} = this.state;
                for (var i = 0; i < data.length; i++) {
                    containers.push(data[i]);
                }
                this.setState({containers});
            }.bind(this)
        })  
    },
    createMainThread: function(containerid) {

    },
    createSubThread: function(containerid) {

    },
    render: function() {
        return (
            <div>
                {this.state.containers.map(function(container) {
                    {console.log(container)}
                    <table key={container.containerid} className="containers">
                        <caption>{container.containername}</caption>
                        <thead className="containerTitle">
                            <tr>
                                <td colspan="2">Main Threads</td>
                            </tr>
                        </thead>
                        <thead>
                            <tr>
                                <td>Thread Name</td>
                                <td>Delete</td>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                container.mainthreads.map(function(mainthread) {
                                    return (
                                    <tr key={mainthread.threadid}>
                                        <td>{mainthread.threadname}</td>
                                        <td><button className="button alert">Delete</button></td>
                                    </tr>
                                    )
                                })
                            }
                            <tr>
                                <td><input type="text"/></td>
                                <td><button className="button">Create</button></td>
                            </tr>
                        </tbody>
                        <thead>
                            <tr>
                                <td colspan="2">Sub Threads</td>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                container.mainthreads.map(function(subthread) {
                                    return (<tr key={subthread.threadid}>
                                        <td>{subthread.threadname}</td>
                                        <td><button className="button alert">Delete</button></td>
                                    </tr>)
                                })
                            }
                            <tr>
                                <td><input type="text"/></td>
                                <td><button className="button">Create</button></td>
                            </tr>
                        </tbody>
                    </table>
                })}
            </div>
        )
    }
});

ReactDOM.render(<AdminForumContainer/>, document.getElementById("AdminForumContainer"))

Answer 1

我会这样写：

            var containers = this.state.containers;
            for (var i = 0; i < data.length; i++) {
                containers.push(data[i]);
            }
            this.setState({containers: containers});

现在有效吗？什么显示this.setState（{containers：containers}，function（）{console.log（this.state））; ？

Answer 2

你实际上正在改变你的状态，这是最好的避免。也就是说，你的for循环直接更新this.state.containers，而状态属性应该被视为只读，只有setState()才能更新它们。

所以当您致电this.state.containers时，您已经更新了this.setState()。我不是React内部的专家，但我认为正在发生的是setState()检查状态对象属性是否与您传入的属性不同;这就是事情：事实并非如此。您传入的containers数组与this.state.containers相同。因此，您的组件不会重新渲染。

我的建议是避免变异this.state.containers。您可以使用Array#concat附加新数据。请注意，Array#concat不会改变数组，它会创建一个新数组。

 success: function(data) {
     // add a loop here if you need to manipulate the data response in some way
     this.setState({
         containers: this.state.containers.concat(data)
     });
 }.bind(this)

更新 - 2015年12月10日

正在进行修正。

虽然我仍然认为以上是好建议，但我不再相信它是你问题的根源。试验React已经证明了我上面关于setState的性质是错误的猜想。在重新呈现之前，React不会将旧状态与新状态进行比较（除非componentWillUpdate被特别重写以执行此操作）。您可以使用现有状态的全部或部分，空对象或根本没有参数调用this.setState()，它仍然会强制重新渲染。它比较的不是旧状态到新状态，而是旧渲染输出到新渲染输出。

React Render不响应Ajax查询的响应

2 个答案: