getDerivedStateFromProps 返回未定义

Question

目前首次使用 getDerivedStateFromProps。我的代码可以工作，它执行我想要它执行的操作，但是我在控制台中收到警告，这让我感到困惑，因为我的代码正在工作。警告 ： "getDerivedStateFromProps((：必须返回有效的状态对象(或 null(。你回来了，没有定义。有没有更好的方法来编写getDerivedStateFromProps以摆脱控制台中的警告？

static getDerivedStateFromProps(props, state) {
state.currentUser.id =
props.location.state && props.location.state.user
? props.location.state.user.id
: state.currentUser.id;
state.currentUser.name =
props.location.state && props.location.state.user
? props.location.state.user.name
: state.currentUser.name;
state.currentUser.roles =
props.location.state && props.location.state.user
? props.location.state.user.roles
: state.currentUser.roles;
state.currentUser.hasAuthenticated = true;
}

Answer 1

getDerivedStateFromProps方法应返回更新的状态切片，而不是更新作为参数传递的状态对象。

return {
currentUser: {
...state.currentUser,
id: props.location.state && props.location.state.user ? props.location.state.user.id : state.currentUser.id,
name: props.location.state && props.location.state.user ? props.location.state.user.name : state.currentUser.name,
roles: props.location.state && props.location.state.user ? props.location.state.user.roles : state.currentUser.roles,
hasAuthenticated: true;
}
}

我添加了...state.currentUser以防您希望将其他一些state.currentUser字段保留到新状态中。

Answer 2

您很可能不需要使用getDerivedStateFromProps： 官方文档解释原因。

似乎您要做的是根据更改道具来更新状态，在这种情况下componentDidUpdate()更合适，而且，您似乎正在根据传入的道具复制状态。

只需在渲染中访问它们就足够了;它们不需要困难的计算。举个假例子：

render() {
const { userName, id } = this.props.currentUser;
const hasAuthenticated = id && userName;
return (hasAuthenticated)
?  <WelcomeMessage />
:  <Login />
}