reactjs - 图形工具包反应组件不维护状态

Question

我有一个列表组件，其中有一个列表项模板作为反应组件，使用 Graph Api 工具包反应组件调用 Graph Api，模板也具有如下所示的组件。

列表组件

 <List
          indicateLoading={true}
          dataSource={listDataSource}
          height="100%"
          selectionMode="single"
          grouped={true}
          collapsibleGroups={true}  
          groupRender={GroupTemplate} searchEnabled={true} 
          onGroupRendered={groupRendered}  itemComponent={**LastMessageDetails**}  searchExpr={["key"]} onItemClick={messageSelected} 
          activeStateEnabled={false} focusStateEnabled={false} hoverStateEnabled={false}
            />

最后留言详情

<div>

<Get maxPages= {1} version="beta" resource={"teams/"+Constants.TeamsID+"/channels/"+ props["data"].ChannelId + "/messages/" + props["data"].MessageId + "/replies?$top=1"}>
            <LastMessageItem template="value"/>
            <LoadingTemplate template="loading"/>                
            </Get>
        </div>

最后消息项

export const LastMessageItem = (props: MgtTemplateProps) => {
    TemplateHelper.setBindingSyntax('[[', ']]');
    const [content, setContent] = React.useState("");
    React.useEffect(() => {
        const object = props.dataContext;
        setContent(object.body.content);
    }, [])
    return (<div className="">
        <Person userId={props.dataContext.from.user.id} showPresence={true} personCardInteraction={1} view={PersonViewType.oneline}></Person>
        <div className="conversationMessage" data-props="innerHTML:formatBodyContent(body.content)">
            {formatBodyContent(content)}
        </div></div>);
}

当列表组件被渲染或重新渲染时，即使道具或资源根本没有改变，也会再次触发 Graph 调用。有没有一种方法可以保护图形调用在父列表组件被渲染时一次又一次地发生。

重新渲染父列表组件时重新渲染子组件

标签： reactjsmicrosoft-graph-apimicrosoft-graph-toolkit