Question

我有一个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状态属性。此属性附加到输入字段。每当我更改输入时，都会运行过滤器功能，该功能会基于此属性更新状态。触发功能后，将正确更新状态以包含与查询匹配的组织。如果我删除输入字段的内容，使其等于初始状态值，则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;
}

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

2 个答案: