React 组件在状态改变时不会重新渲染

小能豆

React 组件在状态改变时不会重新渲染

javascript

我有一个 React 类，它将使用 API 来获取内容。我已确认数据已返回，但它不会重新渲染：

var DealsList = React.createClass({
  getInitialState: function() {
    return { deals: [] };
  },
  componentDidMount: function() {
    this.loadDealsFromServer();
  },
  loadDealsFromServer: function() {
    var newDeals = [];

    chrome.runtime.sendMessage({ action: "findDeals", personId: this.props.person.id }, function(deals) {
      newDeals = deals;
    });

    this.setState({ deals: newDeals });
  },
  render: function() {
    var dealNodes = this.state.deals.map(function(deal, index) {
      return (
        <Deal deal={deal} key={index} />
      );
    });
    return (
      <div className="deals">
        <table>
          <thead>
            <tr>
              <td>Name</td>
              <td>Amount</td>
              <td>Stage</td>
              <td>Probability</td>
              <td>Status</td>
              <td>Exp. Close</td>
            </tr>
          </thead>
          <tbody>
            {dealNodes}
          </tbody>
        </table>
      </div>
    );
  }
});

但是，如果我添加debugger下面的内容，newDeals则会填充，然后一旦我继续，我就会看到数据：

  loadDealsFromServer: function() {
    var newDeals = [];

    chrome.runtime.sendMessage({ action: "findDeals", personId: this.props.person.id }, function(deals) {
      newDeals = deals;
    });
    debugger
    this.setState({ deals: newDeals });
  },

以下是通话交易清单：

var Gmail = React.createClass({
  render: function() {
    return (
      <div className="main">
        <div className="panel">
          <DealsList person={this.props.person} />
        </div>
      </div>
    );
  }
});

阅读 39

2024-06-06

共1个答案

小能豆

我的情况有点不同。我想很多像我一样的新手都会感到困惑 - 所以在这里分享一下。

我的状态变量是一个 JSON 对象数组，使用 useState 进行管理，如下所示：

const [toCompare, setToCompare] = useState([]);

但是，当使用 setToCompare 更新 toCompare 时（如以下函数所示），重新渲染不会触发。将其移动到其他组件也不起作用。只有当其他事件触发重新渲染时，更新的列表才会显示出来。

const addUniversityToCompare = async(chiptoadd) =>
  {
      var currentToCompare = toCompare;
      currentToCompare.push(chiptoadd);
      setToCompare(currentToCompare);
  }

这是我的解决方案。基本上 - 分配数组就是复制引用 - 并且 React 不会将其视为更改 - 因为数组的引用没有改变 - 只有其中的内容。因此在下面的代码中 - 只需使用切片复制数组 - 没有任何更改 - 并在修改后将其分配回去。工作完美。

const addUniversityToCompare = async (chiptoadd) => {
    var currentToCompare = toCompare.slice();
    currentToCompare.push(chiptoadd);
    setToCompare(currentToCompare);
}

希望它能帮助像我这样的人。任何人，如果您觉得我错了，请告诉我 - 或者还有其他方法。

2024-06-06