Question

我将一个名为rows的变量传递给组件“Hello”。如果我删除该组件并简单地在{rows}周围放置“p”标签，则表明变量正确更新。但是，当我将{rows}传递给“Hello”时，它不会更新。有人可以解释某种形式的解决方案！

注意：此代码段是更大项目的一部分。有一个基于用户选择的状态更新“filterBy”变量。所以我不确定这是基于更改的渲染问题状态原因行正在更改和更新。

以下代码：

    var Hello = React.createClass({
    rowMake: function(){
        return (
            <div>
                {this.props.rows.map(function(row, index){
                    return(
                        <tr>
                            <td key={index}>{row.title}</td>
                            <td>{row.status}</td>
                            <td>{row.created_at}</td>
                            <td>{row.updated_at}</td>    
                        </tr>
                    );
                  })
                }
            </div>
        );
    },
    render: function() {
          return (
            <div className="container">           
                <table className="table">
                  <thead>
                    <tr>
                      <th>Title</th>
                      <th>Status</th>
                      <th>Created</th>
                      <th>Updated</th>
                      <th>Delete</th>
                    </tr>
                  </thead>
                  <tbody>{this.rowMake()}</tbody>        
                </table>
          </div>
          );
    }
});


//RequestTable creates the table head and body.

var RequestTable = React.createClass({
    render: function() {
        requests = this.props.requests;
        filterBy = this.props.filterBy;
        var rows = [];
        for(var i = 0; i<requests.length; i++){
            if(filterBy == 'All'){
                rows.push(requests[i]);
            }
            else if(filterBy == 'Approved'){
                if(requests[i]["status"] == "Approved"){
                    rows.push(requests[i]);
                }
            }
            else if(filterBy == 'Denied'){
                if(requests[i]["status"] == "Denied"){
                    rows.push(requests[i]);
                }
            }
            else{
                if(requests[i]["status"] == "Pending"){
                    rows.push(requests[i]);
                }
            }
        }
        return(
            <Hello rows = {rows} />
        );
    }
});

Answer 1

我认为你的rowMake()功能搞乱了。

删除了rowMake()方法并更新了render方法本身的代码。当然，这是处理list数据的更好方法，这些数据会随着DOM事件进行更新。

更新了fiddle

将更新的变量传递给RreactJS组件，但变量未在组件内正确更新

1 个答案: