Question

我的React JS文件如下：

这背后的逻辑：

1。）CreateTable呈现CreateColumns，CreateRows和＆amp; ChangeResults

在第一次渲染时，CreateRows为空，但是一旦组件安装，就会进行fetch()调用以更新行，页面重新渲染以及我的表格

2。）加载ChangeResults组件，创建一个输入框。将num_of_rows声明为空字符串（占位符，不确定我是否需要执行此操作）。

当我在输入字段中输入一些数字并点击时，onClick会运行updatePage，调用函数updateRows（在CreateTable中），然后更改状态为people_per_page。我有console.log()来验证这实际发生了，并按预期打印出来。

我认为，由于CreateRows继承了people_per_page，并且我改变了people_per_page的状态，它会导致重新渲染......但没有任何事情发生。

任何人都可以看到为什么会这样吗？

var CreateTable = React.createClass({
    getInitialState: function(){
        console.log('initial state loaded')
        return {
            'table_columns' : ['id','email', 'first', 'last', 'title', 'company', 'linkedin', 'role'],
            people_per_page: 34
        }
    },

    updateRows: function(rows) {
        console.log(rows)
        this.setState(
            {people_per_page: rows},
            function() {
                console.log(this.state.people_per_page)
            }
        )
    },

    render: function(){
        return (
            <div>
                <ChangeResults updateRows = {this.updateRows} />
                <table>
                    <CreateColumns columns={this.state.table_columns} />
                    <CreateRows num_of_rows = {this.state.people_per_page} />
                </table>
            </div>
        )   
    }
});

var ChangeResults = React.createClass({
    getInitialState: function(){
        return {
            num_of_rows : ''   
        }

    },

    handleChange: function(e) {
        this.setState({
            'num_of_rows' : e.target.value
        });
    },

    updatePage: function(){
        this.props.updateRows(this.state.num_of_rows);
    },

    render: function(){
        return (
            <div>
                Number of people per page: <br />
                <input type="text" onChange = {this.handleChange} />
                <button onClick={this.updatePage}> Update Page </button>
            </div> 
        )
    }

})

var CreateColumns = React.createClass({
    render: function(){
        var columns = this.props.columns.map(function(column, i){
            return (
                <th key={i}> 
                    {column} 
                </th>
            )
        });

        return (
            <thead>
                <tr>
                    {columns}
                </tr>
            </thead>
        )
    }
});

var CreateRows = React.createClass({
    getInitialState: function() {
        return {
            'people':[],
        }
    },

    componentDidMount: function(){
        console.log('componentDidMount running')
        this.createRow();
    },

    createRow : function(){
        console.log('starting fetch')
        fetch('http://localhost:5000/search', {
            method: 'POST',
            body: JSON.stringify({
                people_per_page: this.props.num_of_rows
            })
        })
            .then(function(response) {
                return response.json()
            })
            .then((responseJson) => {
                return this.setState({'people' : responseJson.people }) 
            });
    },


    render: function(){
        var rows = this.state.people.map(function(row, i){
            return (
                <tr key={i}>        
                    <td>{row['id']}</td>
                    <td>{row['email']}</td>
                    <td>{row['first']}</td>
                    <td>{row['last']}</td>
                    <td>{row['title']}</td>
                    <td>{row['company']}</td>
                    <td>{row['linkedin_url']}</td>
                    <td>{row['role']}</td>
                </tr>
            )
        })
        return (
            <tbody>
                {rows}
            </tbody>
        )
    }
});


ReactDOM.render(<CreateTable />, document.getElementById('content'));

Answer 1

在<CreateRows />中，当组件在页面上“挂载”时，componentDidMount仅在第一次渲染时被调用。之后，您需要在componentDidUpdate或应用程序中的其他位置获取新数据。

React DOM不重新渲染

1 个答案: