子组件不呈现从父组件传递的数据

Question

我有子组件，在渲染函数中我正在填充这样的视图

{this.state.supportTopicMetadataTreeNode.children.map(
                        (metadata: SupportTopicMetadataTreeNode) => (
                            <div>
                                <SupportTopicMetadataContainer
                                    supportTopicMetadataTreeNode={metadata}
                                ></SupportTopicMetadataContainer>

                            </div>
                        )
  )}

SupportTopicMetadataTreeNode 的类型如下：

export default class SupportTopicMetadataTreeNode {
    public data: SupportTopicMetadata;
    public children: SupportTopicMetadataTreeNode[];
}

在父组件中，我在上面的组件中调用如下：

 {this.state.metadataList && this.state.metadataList.map((metadata: SupportTopicMetadataTreeNode) =>
                    <div>
                        <SupportTopicMetadataContainer supportTopicMetadataTreeNode={metadata}>
                        </SupportTopicMetadataContainer>
                    </div>

                )}

在调用上面的子函数之前，我将当前修改值的状态设置为metadaList，如下所示：

this.setState({ metadataList: filteredList });

但在子组件中，它没有填充filteredList 的有效数据。我已检查状态是否正确分配给metadataList 我的预期值没有得到问题是什么？

我也在尝试将filteredList 传递给子组件，以便可以直接在this.state.supportTopicMetadataTreeNode.children 上循环

知道如何将其传递给子状态或在子状态上定义的变量吗？

Update:

我已经像下面这样初始化了构造函数：

constructor(props: ISupportTopicMetadataEntryContainerProps) {
        super(props);
        this.state = {
            supportTopicMetadataTreeNode: props.supportTopicMetadataTreeNode,


        };

    }

所以我不需要像这样回答this.props.supportTopicMetadataTreeNode.children。现在我可以得到this.state.supportTopicMetadataTreeNode.children。不明白是什么问题。

Answer 1

您使用的组件数据不正确。在您的子组件 SupportTopicMetadataContainer 中，supportTopicMetadataTreeNode 是道具，而不是像您使用 this.state.supportTopicMetadataTreeNode.children 的状态。

应该是this.props.supportTopicMetadataTreeNode.children，这将解决您的问题。