Question

我有一个组件（显示一个列表），该组件会在更新道具（redux）之前渲染（有一个新项目添加到列表中，应该显示，但不显示，除非重新加载应用程序）。我写这个是为了防止这种行为：

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.data === nextProps.data) {
      return false;
    } else {
      return true;
    }
  }
  componentWillUpdate(prevProps){
      if(prevProps.data !== this.props.data){
         this.props.onFetchAction()
      }
  }

它使组件在渲染之前更新，但在控制台上onFetchAction（）不停地被解雇。我怎样才能防止这种情况？任何帮助将不胜感激。

Answer 1

可能通过调用this.props.onFetchAction()来更新props.data。您在this.props.data中存储什么类型的数据？如果它是一个对象，则是按引用而不是数据进行比较。这就是prevProps.data !== this.props.data始终为false且循环不定的原因。

您可以使用isEqual库的lodash（https://lodash.com/docs/4.17.14#isEqual）方法。此方法将通过其中的数据而不是引用来检查两个对象。因此，代码将类似于：if (!isEqual(prevProps.data, this.props.data) { ... }。

Answer 2

我相信无限循环是由onFetchAction引起的。如果onFetchAction是导致this.props.data更新的函数，则此条件将始终为true，因此将发生无限循环。

 if(prevProps.data !== this.props.data){  //always true
     this.props.onFetchAction() //updates this.props.data
 }

您必须确保onFetchAction中发生的一切不会直接更新this.props.data。

回复评论。

如果onFetchAction是更新this.props.data的东西，那么我认为您正在做的事情行不通。我将亲自在componentWillMount中设置onFetchAction。然后，无论何时需要更新this.props.data，都可以在需要它的任何函数上调用onFetchAction。

componentWillMount() {
     this.props.onFetchAction()
}

Answer 3

这解决了问题：

private string GetSchedule()
{
    string tempPath = Path.GetTempFileName().Replace(".tmp", ".xlsm");
    try
    {
        AuthenticationManager authManager = new OfficeDevPnP.Core.AuthenticationManager();
        ClientContext ctx = authManager.GetWebLoginClientContext("https://oursite.sharepoint.com/sites/ourspecificsite/");
        Web web = ctx.Web;
        Microsoft.SharePoint.Client.File schedule = web.GetFileById(new Guid("ourguid"));
        ctx.Load(web);
        ctx.Load(schedule);
        ctx.ExecuteQuery();
        FileInformation fInfo = Microsoft.SharePoint.Client.File.OpenBinaryDirect(ctx, schedule.ServerRelativeUrl);
        using (var fileStream = File.Create(tempPath))
        {
            fInfo.Stream.CopyTo(fileStream);
        }
    }
    catch (WebException e)
    {
        StatusUpdated?.Invoke(this, new EventArgs<string>(e.Message));
        return null;
    }

    return tempPath;
}

componentDidUpdate导致无限循环

3 个答案: