2

我正在尝试使用的第二个参数setState来传递回调函数，但看起来（据我所知）服务器端渲染器完全忽略了这个参数。我正在使用Gatsby，它利用服务器端渲染来构建基于 React 的静态站点。我的电话在一个onChange处理程序中，看起来像这样：

this.setState({ [event.target.name]: event.target.value }, () => { console.log('setState callback') })

状态按预期更新，但从未调用回调。注意：无论我为第一个参数传递对象还是函数，同样的问题都适用。组件函数如下所示：

ReactComponent.prototype.setState = function (partialState, callback) {
  [...]
  this.updater.enqueueSetState(this, partialState, callback, 'setState');
};

该更新程序的方法ReactUpdateQueue.js（根据调用堆栈）如下所示：

enqueueSetState: function (publicInstance, partialState)

我不完全理解 React 的构建过程，但我相信方法/文件来自源中的这个文件：

/src/renderers/shared/server/ReactPartialRenderer.js

我唯一能找到定义这个函数的地方是这里：

/src/isomorphic/modern/class/ReactNoopUpdateQueue.js

enqueueSetState: function(
  publicInstance,
  partialState,
  callback,
  callerName,
) {
  warnNoop(publicInstance, 'setState');
}

setState这看起来像正确的方法签名，但当我在代码中调试调用时，它不会出现在调用堆栈中的任何位置。这似乎不是客户端呈现的 React 组件的问题（我将尝试设置一个简单的存储库来显示此问题，但它在 CodePen 等上似乎不可复制）我知道我可以componentDidUpdate使用完成我需要做的事情，但在我的例子中回调更方便，我讨厌留下这样一个未解之谜。:)

4

1 回答 1

2

好吧，我想通了，结果发现，就像经常发生的那样，这是一个自己造成的错误。默认的 Gatsby 安装使用 React v15，但我们想使用 16，所以我们在 中添加了一个直接依赖，它package.json内置到生成的包中。我仍然不太明白为什么上面提到的版本enqueueSetState被调用而不是正确的版本，但是删除了对 react 的引用（并添加了gatsby-plugin-react-next，它通过简单地将 webpack 指向较新的版本）解决了这个问题。

至少这是一个很好的借口，可以让我们更加熟悉 React 的内容。也许这会在未来为其他人节省一些时间。

于 2017-10-17T19:14:53.537 回答