渲染后调用的函数反应原生

Posted 2023-02-22

【中文标题】渲染后调用的函数反应原生

【英文标题】：Function called after render react native

【发布时间】：2019-01-05 20:06:22

【问题描述】：

我有一个加载函数，可以将我的数据加载到我的 ListView 数据源中，正如您可能知道的那样，ListView 不会总是随着状态变化而重新渲染，我需要强制更新它这个加载函数工作得非常好，可以通过按钮调用，但我希望它能够自动加载但在 componentwill/did 挂载函数中调用 forceupdate 不可用我该怎么办？我只想在渲染后稍微延迟调用我的函数。问题是 this.props.navigation 在渲染之前不是一个对象，不能在 componentwill/did mount 中使用。

 //   UNSAFE_componentWillMount() 
//   this.makeScene();
// 

makeScene()
var count = Object.keys(window.contents[this.props.navigation.getParam('name')]).length;
for(let i = 0 ; i < count ; i ++)
  global.subnum[i] = i;
  global.lowersubjects[i] = window.contents[this.props.navigation.getParam('name')][i].subject;
  global.lowerdescriptions[i] = window.contents[this.props.navigation.getParam('name')][i].description;
  global.lowerimageurl[i] = window.contents[this.props.navigation.getParam('name')][i].imageurl;
  global.author[i] = window.contents[this.props.navigation.getParam('name')][i].author;
  global.eventdate[i] = window.contents[this.props.navigation.getParam('name')][i].eventdate;

this.setState(
  subnum : global.subnum
);
this.forceUpdate();
    

取消注释将导致我的应用按钮和渲染停止工作。

【参考方案1】：

三件事：

首先，如果指定字段为空或不存在，getParam 缺少一个默认值的参数：

var name = this.props.navigation.getParam('name', 'defaultName')

有了名字，你就不必一直调用它来访问你的数组单元格了。

第二，你是什么window.contents？

最后，如果组件的 state 或 props 发生变化，每个 this.setState() 调用都会导致视图呈现。你应该在componentDidMount() 中调用你的过程，是的，this.props.navigation 应该可以访问到componentDidMount()，因为我想你的组件在导航器中......

【讨论】：

componentdidmount 的问题是它在我的应用程序启动时被调用，而不是当我导航到页面时我希望在呈现页面时调用它，因为作为全局变量的 window.contents 被填充在上一页中，如果在我导航到页面（我使用stacknavigator）之前调用它，我会得到未定义，并感谢顺便说一句。

componentDidMount 应该在安装组件时调用，而不是在应用程序启动时调用。如果您的数据源保持在您的 ListView 将重新呈现的状态内。您也可以尝试在构造函数中调用this.makeScene()。如果您尝试在 makeScene 函数中使用您正在“生成”的某些数据，如果在 ListView 尝试呈现它之前未完成，您可能会收到错误。

@howtopythonpls 我不知道为什么，但是当我使用 stacknavigator 时，当我移动到我的 stacknavigator 的第一页时 componentdidmount 被调用（没有移动到我调用 componentdidmount 的页面），我发现其他人有这个也有问题。但无论如何，谢谢我可以通过调用componentwillmount来修复它，它在开始时被调用，当我导航到页面并添加了一个if条件时，我的函数只会在window.content准备好而不是空的时候被调用。

好吧，您是否在 componentDidMount 中使用 console.log 来确认是这种情况（因为这很奇怪）？我有一个类似的问题，当我离开页面时，构造函数和 componentDidMount 都被调用了，必须像你一样用一个条件来解决这个问题。

@BehnamAminazad 是的，当您创建 Navigator 时，它会在渲染 Navigator 时立即挂载它包含的所有组件，这是正常行为。在你的componentDidMount()，或者更好的是，在你的shouldComponentUpdate(nextProps, nextState)，检查你是否有你需要的数据，或者设置一个不会让你的视图崩溃的默认值（不要忘记这个方法必须返回一个布尔值）