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

【问题标题】：Set initial state from props in constructor doesn't work从构造函数中的道具设置初始状态不起作用
【发布时间】：2018-12-13 15:14:34
【问题描述】：

我有一个 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 只是一个空数组。

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

如何将初始状态设置为等于道具？

【问题讨论】：

如果您希望状态主动反映更新的道具，则不应在构造函数中使用道具设置状态。只需使用 render 中的道具

标签： reactjs redux

【解决方案1】：

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

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

render() {
...

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

...
}

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

【讨论】：

【解决方案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;
}

【讨论】：