从构造函数中的 props 设置初始状态不起作用

Question

我有一个react.js typescript应用程序，其中有一个组件(OrganizationsSearch(，它从父组件(Organizations(接收道具，而父组件又从redux接收道具。

在OrganizationsSearch组件中，我初始化状态如下：

export default class OrganizationsSearch extends React.Component<Props, State> {
constructor(props: Props) {
super(props)
this.state = {
filteredOrganizations: this.props.organizations,
filterQuery: ""
}
}
...

问题是，当我通过路由设置导航到组件时，filteredOrganizations状态不等于props.organizations。filteredOrganizations只是一个空数组。

从上面的代码中可以看出，我有一个filterQuery状态属性。此属性附加到输入字段。每当我更改输入时，都会运行一个过滤器函数，根据此属性更新状态。当触发该功能时，状态会正确更新，以包含与查询匹配的组织。如果我删除输入字段内容，使其等于初始状态值，那么filteredOrganizations状态包含所有组织，就像它在组件加载时最初应该做的那样。

我该怎么做才能将初始状态设置为与道具相等？

Answer 1

我认为您的问题可能是，当OrganizationsSearch的构造函数运行时，this.props.organizations中没有数据。您可以使用console.log轻松检查。

您可以修复这样一个问题，即只有在组织数据准备就绪时才能部署OrganizationsSearch组件。您可以显示正在加载。。。在此之前的文本或某种进度指示器。

render() {
...
{organization ? <OrganizationsSearch organization={organization} /> : <div>Loading...</div>}
...
}

另一种方法可以是，不将filteredOrganization存储在状态中。您可以从组织和渲染器的过滤器值动态创建它。因此，真相只有一个单一的来源，你可以避免数据不一致。无论如何，都不鼓励将道具数据存储在状态中。

Answer 2

我认为这可能与您的组件生命周期有关。只有当组件为..时才调用构造函数。。建造。因此，根据redux何时设置道具，可能为时已晚，因为您的组件已经用一个空道具"构建"。你可以在这类文章中了解更多https://blog.bitsrc.io/understanding-react-v16-4-new-component-lifecycle-methods-fa7b224efd7d

TL；DR您不能使用静态函数getDerivedStateFromProps，例如：

static getDerivedStateFromProps(props, state) {
if (state.value !== props.value) {
return {
derivedValue: deriveValueFromProps(props),
mirroredProp: props.value
}
}
// when null is returned no update is made to the state
return null;
}