如何在 react-native 中重新渲染组件？

Question

我是 react-native 开发的新手，已经为这个问题花了 2 天时间。 我不擅长打字，但我可以用我的源代码解释问题。

当前场景：

1. 应用程序主屏幕：有用于停靠特定卡的停靠图标。 单击停靠图标后，该卡作为停靠列表存储在数据库中。 它工作正常。

2. 在主屏幕上有诸如切换到 Docklist 之类的链接：当我单击 Docklist 时，它将重定向到 Docklist 屏幕上，它运行良好。

3. 在 DockList 屏幕上有 4 张卡片，例如“Card a”、“View Docklist”、“Card c”、“Card d”

在此屏幕上执行的步骤：

1. 组件DidMount()
   • 在 componentDidMount() 上，我从 AsyncStorage(Local Storage) 获取“ID”并将该值设置为状态。 我将此 Id 传递给 api 参数。
   • 调用服务器 API (this.viewDockList())

问题领域：

• 根据我的知识和研究，componentDidMount() 在渲染后只调用一次。
• 我需要随时单击“查看 DockList”时调用 api。
• 在这里，当我刷新应用程序时，以下场景正在运行

  1. 主屏幕-> 我从主屏幕停靠了一张卡片

  2. 在主屏幕上 -> 点击“切换到 DockList” -> 导航到 Dock 屏幕

  3. 在 Dock 屏幕上 -> 单击“查看 Dock 列表”-> 第一次调用 api 并根据我的要求显示数据。

  4. 现在，我返回主屏幕并再次停靠卡并导航到停靠屏幕并点击查看停靠列表当时，Api 不只调用 render() 正在调用。 这里我需要再次调用 API 并从服务器获取最新数据。 我试图在点击“查看码头详细信息”时调用强制更新，调用了 api 但未更新列表。

这是我的源代码：

componentDidMount() {
    console.log("ComponentDidmount called")

    AsyncStorage.getItem('Id').then(value => {
        if (value !== null) {
            this.setState({ profileId: value })
        }
    })

    this.getDockedData();
}

 getDockedData = async () => {

    this.showLoading();

    console.log("API CALLED=====")

    try {
        let axiosConfig = {
            headers: {
                'Access-Control-Allow-Origin': '*'
            },
            params: {
                pId: this.state.profileId,
            }
        }

        axios.get('apiendpoint', axiosConfig)
            .then((res) => {

                this.setState({
                    sourceData: [...res.data.filter((item) => { if (!item.s_updated && !item.b_updated && !item.p_updated) return item })],

                });
                console.log("Data from dock api====", this.state.sourceData)
                this.hideLoading();
            })
            .catch((err) => {
                console.log("AXIOS ERROR WHILE GETTING DOCK DATA: ", err);
                this.hideLoading();
            })
    }

    catch (error) {
        console.log("ERROR======", error);
        this.hideLoading();
    }
}

   forceUpdate() {
    console.log("Force update called===")
    this.getDockedData();
  }   

//On render I am calling component 
 <Dockcomp  description="Lorum ipsum" onButtonPress={() => this.props.navigation.navigate('dockdetailscreen', { item: sourceData, type: "docked", UpdateUI: this.UpdateUI }, this.forceUpdate())} />

预期回应：

1. 主屏幕-> 我从主屏幕停靠了一张卡片
2. 在主屏幕上 -> 点击“切换到 DockList” -> 导航到 Dock 屏幕
3. 在 Dock Screen -> 点击“View Dock List” -> 每当我点击 View Dock list 时，api 应该被调用。 现在它只调用一次，因为我使用了 componentDidMount()

非常感谢您！ 从过去 2 天开始，我真的为这个问题而苦苦挣扎。

Answer 1

你不需要重新渲染。 您可以编写一个监听器来触发 getDockedData 一旦组件被聚焦。 像这样：

componentDidMount() {
    this.unsubscribe = navigation.addListener('focus', () => {
      // stuff you are already doing in componentDidmount
    });
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

您可以在此处了解有关侦听器和导航事件的更多信息

Answer 2

React 和 React-Native 使用 shadowDOM 来评估何时触发重新渲染。 除非强制，否则只有在组件的state或prop更改时才会重新渲染。 在这一点上，在树中进行浅层比较以查看是否需要重新渲染。 因此，如果您想调用重新渲染，则可以在 componentDidMount 中添加一个触发状态更改的侦听器。 或者其他任何地方真的。