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

【问题标题】：Passing updated variable to RreactJS component but variable not updating correctly inside the component将更新的变量传递给 RreactJS 组件，但变量在组件内未正确更新
【发布时间】：2016-12-28 22:22:32
【问题描述】：

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

注意：这个 sn-p 是一个更大项目的一部分。有一个基于用户选择的状态会更新“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} />
        );
    }
});

【问题讨论】：

你登录this.props.rows了吗？还有一件事tbody 不会有div 作为直接孩子。重构
如果您的意思是“记录”，如 wrap {rows}，然后将其传递给 p 标签中的“Hello”以查看它是否更改，是的，我有。它更新。但是由于某种原因，当我将它也传递给组件并记录它时，它会保留很多旧值并且不会正确更改。只有当我不传递给“Hello”组件时才会正确更改。
不，我的意思是 console.log(rows) 在 Hello 组件中查看它们是否正确通过道具
无法让 console.log 工作。所以我所做的就是将“
{rows}
”放在rowMake函数中，并且变量是正确的。它正在更新。出于某种原因，当我在所有桌子的东西里面时，虽然它不起作用。
对不起，我的意思是在“Hello”组件渲染函数内部。

标签： javascript reactjs jsx

【解决方案1】：

我认为你的 rowMake() 函数搞砸了。

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

更新fiddle

【讨论】：

天啊...你太棒了！不知道为什么我一开始不尝试这样做。谢谢！！！