时间戳

首页 > 解决方案 > 从构造函数中的道具设置初始状态不起作用

reactjs - 从构造函数中的道具设置初始状态不起作用

问题描述

我有一个 react.js 打字稿应用程序，其中有一个组件 (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只是一个空数组。

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

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

标签： reactjsredux

解决方案

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

您可以修复它，仅在组织数据准备好时才显示 OrganizationsSearch 组件。您可以在此之前显示 Loading... 文本或某种进度指示器。

render() {
...

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

...
}

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

推荐阅读