React 组件不会在 state 更改时重新渲染

Question

我有一个 React Class，它将转到 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>
    );
  }
});

Answer 1

我想添加一个非常简单但很容易出错的写作错误：

this.state.something = 'changed';

...然后不明白为什么它不渲染和谷歌搜索并来到这个页面，才意识到你应该写：

this.setState({something: 'changed'});

如果您使用setState更新状态，React 只会触发重新渲染。

Answer 2

那是因为来自chrome.runtime.sendMessage的响应是异步的； 这是操作顺序：

var newDeals = [];

// (1) first chrome.runtime.sendMessage is called, and *registers a callback*
// so that when the data comes back *in the future*
// the function will be called
chrome.runtime.sendMessage({...}, function(deals) {
  // (3) sometime in the future, this function runs,
  // but it's too late
  newDeals = deals;
});

// (2) this is called immediately, `newDeals` is an empty array
this.setState({ deals: newDeals });

当你用调试器暂停脚本时，你给了调用回调的扩展时间； 当您继续时，数据已经到达并且似乎可以工作。

要修复，您希望在数据从 Chrome 扩展程序返回后执行setState调用：

var newDeals = [];

// (1) first chrome.runtime.sendMessage is called, and *registers a callback*
// so that when the data comes back *in the future*
// the function will be called
chrome.runtime.sendMessage({...}, function(deals) {
  // (2) sometime in the future, this function runs
  newDeals = deals;

  // (3) now you can call `setState` with the data
  this.setState({ deals: newDeals });
}.bind(this)); // Don't forget to bind(this) (or use an arrow function)

[编辑]

如果这对您不起作用，请查看此问题的其他答案，其中解释了您的组件可能无法更新的其他原因。

Answer 3

另一个非常简单的错误，这是我的问题根源：我编写了自己的shouldComponentUpdate方法，它没有检查我添加的新状态更改。

Answer 4

我的情况有点不同。 而且我认为很多像我这样的新手都会被难住 - 所以在这里分享。

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

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

但是，当使用 setToCompare 更新 toCompare 时，如下面的函数所示 - 不会触发重新渲染。 并将其移动到不同的组件也不起作用。 只有当其他一些事件会触发重新渲染时 - 更新的列表才会出现。

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

这是我的解决方案。 基本上 - 分配数组是复制引用 - 并且反应不会将其视为更改 - 因为数组的引用没有被更改 - 只有其中的内容。 所以在下面的代码中 - 只是使用切片复制了数组 - 没有任何更改 - 并在 mods 之后将其分配回来。 工作得很好。

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

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

提前致谢。

Answer 5

要正确更新 state，您不应改变数组。 您需要创建数组的副本，然后使用复制的数组设置 state。

const [deals, setDeals] = useState([]);
    
   function updateDeals(deal) {
      const newDeals = [...deals]; // spreading operator which doesn't mutate the array and returns new array
      newDeals.push(deal);

      // const newDeals = deals.concat(deal); // concat merges the passed value to the array and return a new array
      // const newDeals = [...deals, deal] // directly passing the new value and we don't need to use push
    
      setDeals(newDeals);
    }

Answer 6

就我而言，我正确地调用了this.setState({}) ，但我的函数没有绑定到 this，所以它不起作用。 将.bind(this)添加到函数调用或在this.foo = this.foo.bind(this)函数中执行this.foo = this.foo.bind(this)修复它。

Answer 7

我在 React-Native 中遇到了同样的问题，其中 API 响应和拒绝没有更新状态

apiCall().then(function(resp) { this.setState({data: resp}) // wasn't updating }

我通过用箭头函数改变function解决了这个问题

apiCall().then((resp) => {
    this.setState({data: resp}) // rendering the view as expected
}

对我来说，这是一个有约束力的问题。 使用箭头函数解决了这个问题，因为箭头函数不会创建自己的this ，它总是绑定到它来自的外部上下文

Answer 8

我的问题是当我应该使用“React.Component”时我使用了“React.PureComponent”。

Answer 9

我正在更新并返回传递给我的减速器的相同对象。 我通过在像这样返回状态对象之前制作元素的副本来解决这个问题。

Object.assign({}, state)

Answer 10

在查看了许多答案（其中大多数对于他们的场景是正确的）并且没有一个解决我的问题后，我意识到我的情况有点不同：

在我奇怪的场景中，我的组件在状态内呈现，因此无法更新。 下面是一个简单的例子：

constructor() {
    this.myMethod = this.myMethod.bind(this);
    this.changeTitle = this.changeTitle.bind(this);

    this.myMethod();
}

changeTitle() {
    this.setState({title: 'I will never get updated!!'});
}

myMethod() {
    this.setState({body: <div>{this.state.title}</div>});
}

render() {
    return <>
        {this.state.body}
        <Button onclick={() => this.changeTitle()}>Change Title!</Button>
    </>
}

重构代码以不从状态渲染主体后，它工作正常:)

Answer 11

如果有人在这里遇到类似问题，但使用 React Functional 组件而不是 class 组件并且还使用 React reducer，--> 将 api 调用移到 reducer 之外。 Reducer 永远不应该调用 api。 详细回复参考https://stackoverflow.com/a/39516485/12121297