React Child 组件不会更新道具答案

【问题标题】：React Child component wont update propsReact Child 组件不会更新道具
【发布时间】：2020-08-10 18:51:59
【问题描述】：

我是新手，我正在尝试创建一个 Teams 自定义应用程序。我创建了一个子组件，它显示了 Popup 上的资源列表 - PopupResources - 该列表在异步调用后更新。

我开始将父状态上的列表设置为空 (this.setState({resources: []});)，并且在异步调用之后我设置了一个虚拟列表。子组件 prop (roomResources) 是从父状态设置的。

但似乎子组件没有更新 - 它没有显示新列表。你能帮忙吗？

这是我的代码：

家长：

const dummyRoomResources = [{ id:1, description: "r1", checked: false}, {id:2, description:"r2", checked: false}, {id:3, description:"r3", checked: false}]

export class MyTab extends TeamsBaseComponent<IMyTabProps, IMyTabState> {
        
    constructor(props) {
        super(props);
        this.setState({resources: []});
        
     }
     
    public async componentWillMount() {
                
        this.updateComponentTheme(this.getQueryVariable("theme"));
        this.setState(
                    Object.assign({}, 
                                this.state, 
                                {                                    
                                    resources: []
                                }
                                )
                            );
        this.updateTheme(this.getQueryVariable("theme"));
               
        if (await this.inTeams()) {
                    ...
        } else {
            this.setState({
                        entityId: "This is not hosted in Microsoft Teams", paxNr: 0,
                        resources: dummyRoomResources
                    });
                   
        
        }
    }
    
    ...
    
    public render() {
            return (
              <Provider theme={ this.state.teamsTheme }>
                ...
                    <div>
                    
            <PopupResources roomResources={(this.state.resources)}></PopupResources>

子组件：

export interface IPopupResourcesProps {
   roomResources: any[]
}

class PopupResources extends React.Component<IPopupResourcesProps, IPopupResourcesState> {

  constructor(props) {
    super(props);
    
  }
  
  popupContent = (
    <>
      {

        this.props.roomResources.map(item => (
                          <Checkbox label={item.description}></Checkbox>
                                )
                        ) 
      }
      <br />
      
    </>
  )


  render(){
     return (
       <Popup
          trigger={
            <Input icon={<SettingsIcon />} placeholder="Recursos" type="text"  />
      
      }
      content={{
        content: this.popupContent,
        'aria-label': 'Recursos',
       }}
       trapFocus
/>
  )
}
}

【问题讨论】：

标签： reactjs asynchronous

【解决方案1】：

您在PopupResources 组件中的render() 方法之外设置popupContent。

将其移入render()

render () {
  const popupContent = ...

  ...
}

当 props 更新时，渲染重新运行，并且您想根据 props.roomResources 的新值渲染 popupContent。

目前，因为您在渲染方法之外设置了一次popupContent，所以它只是一个以props.roomResources ([]) 的初始值渲染的常量。

【讨论】：