CRA反应

CRA反应 - redux：componentWillReceiveProps被触发，但没有重新渲染(CRA react - redux : componentWillReceiveProps is triggered, but no rerender)

我使用create-react-app来做一个连接到我的plex的最小应用程序，然后我做了登录表单。

到目前为止，我已经添加了react-router，redux和redux-saga，现在是时候对我的后端进行第一次POST了。

所有工作都按照需要工作，除了一件事：登录失败后容器不会重新渲染，但它会通过componentWillReceiveProps方法。

这是发生的事情：

事情是：商店已经改变 ，因为如果我输入触发重新渲染的内容，则会显示错误消息。

我还可以看到，在redux DevTool中，商店确实存在来自服务器的错误。 最后，服务器错误也在componentWillReceiveProps日志中。

我现在不知道该尝试什么。 你可以在这里看到所有的代码： https ： //github.com/kai23/askimovie/tree/add_plex_login

登录减速器 容器 那个行动

谢谢你给予的任何帮助:)

I use the create-react-app to do a minimal application which connect to my plex, and I did the login form.

I've added react-router, redux and redux-saga so far, and time has come to make the first POST to my backend.

All worked as wanted, except one thing : the container doesn't rerender after a failed login, but it goes throught the componentWillReceiveProps method.

Here is what happened :

the thing is : the store has changed, because if I type something triggering the re-render, the error message will show up.

I can also see, in the redux DevTool that the store has, indeed, the error from the server. Finally, the server error is also in the componentWillReceiveProps log.

I don't know what to try now. You can see all the code here : https://github.com/kai23/askimovie/tree/add_plex_login

the login reducer the container the action

Thanks for any help given :)

最满意答案

取出这段代码或更新它，你的组件正在重新渲染，但当你想要进行更新时，它不是已经改变的状态它是你的道具。 所以当道具改变时，这会运行并返回true，因为它一次只检查一个。 它不会同时检查状态变化和道具变化。

shouldComponentUpdate(nextProps, nextState) { return nextState.loginInput !== this.state.loginInput || nextState.passwordInput !== this.state.passwordInput || nextState.capsLockOn !== this.state.capsLockOn || nextState.inputPasswordType !== this.state.inputPasswordType ; }

Take out this code or update it, your component is re-rendering but its not the state that has changed when you want to do the the update it's your props. So when the props change this runs and returns true, because it only checks one at a time. It's not checking state change and props change at the same time.

shouldComponentUpdate(nextProps, nextState) { return nextState.loginInput !== this.state.loginInput || nextState.passwordInput !== this.state.passwordInput || nextState.capsLockOn !== this.state.capsLockOn || nextState.inputPasswordType !== this.state.inputPasswordType ; }