小编Jig*_*val的帖子

React:如何停止重新渲染组件或在同一路由的路由器更改上停止 API 调用

我需要帮助才能停止在路线更改时再次进行相同的 API 调用。我试图在网络和 stackoverflow 上找到可用的解决方案,但我无法弄清楚修复此问题需要进行哪些更改。

我还尝试使用 sessionStorage 来存储一个标志,如果 API 调用被触发,则标志设置为 true,并且在路由器更改时,我检查标志是否为 true,然后不进行任何 API 调用。但随后它会将文章列表清空。

我有一个带路由的主要应用程序组件,其中包含两个组件:(请参阅下面给出的代码)

  1. 文章首页
  2. 书签首页

我面临的问题是,当我第一次点击时http://localhost:3001,它会重定向到http://localhost:3001/articles页面并正确呈现ArticleHome组件并获取文章列表。然后我单击“书签”链接,它会呈现http://localhost:3001/bookmarks路线和相关组件,并进行 API 调用来呈现书签列表。

但是,当我使用路由器返回“文章”页面时,http://localhost:3001/articles由于每次路由更改时组件都会重新渲染,它会再次触发 API 调用来获取文章。

谁能指导我如何在路由器更改和组件重新渲染时停止再次执行 API 调用?

如果数据已经加载,是否有更好的方法来处理同一组件的路由器更改上的 API 调用?

class App extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
    }

    render() {
        return (
            <Router>
                <React.Fragment>
                    <Switch>
                        <Route exact path="/" render={() => <Redirect to="/articles" />} />
                        <Route path="/articles" render={() => <ArticleHome type="articles" />} />
                        <Route path="/bookmarks" render={() => <BookmarkHome type="bookmarks" …
Run Code Online (Sandbox Code Playgroud)

javascript api reactjs react-router

5
推荐指数
1
解决办法
6208
查看次数

Ionic React 4.11:如何在导航中推送和弹出 (IonNav)

我是 Ionic 的新手。我刚刚在本地系统上安装了新发布的 Ionic React 4.11 ( https://ionicframework.com/blog/annoucing-ionic-react/ )。但是在某些组件上找不到合适的文档。此文档页面不包含任何使用示例。

我需要一些帮助来实现下面给出的链接中显示的导航示例。

https://ionicframework.com/docs/api/nav

在此处输入图片说明

任何人都可以指导如何在 Ionic React 中实现相同的示例。

我在这里找到了示例代码:https : //github.com/ionic-team/ionic-docs/blob/master/src/demos/api/nav/index.html

但它是纯 JavaScript,所以我尝试将其转换为 React 格式。但不确定如何在 React 中转换相同的示例代码。只有 Pending 部分是在单击任何项​​目时注入相关的 NavDetail 组件。请参阅随附的屏幕截图,我能够实现多少。

在此处输入图片说明

const techs = [
    {
        'title': 'Angular',
        'icon': 'angular',
        'description': 'A powerful Javascript framework for building single page apps. Angular is open source, and maintained by Google.',
        'color': '#E63135'
    },
    {
        'title': 'CSS3',
        'icon': 'css3',
        'description': 'The latest version of cascading stylesheets - the styling language of the web!',
        'color': '#0CA9EA' …
Run Code Online (Sandbox Code Playgroud)

reactjs ionic-framework ionic4

5
推荐指数
1
解决办法
3845
查看次数

Javascript 通过包含搜索词的标签子数组过滤或减少每个 JSON 对象

我需要关于通过其子子数组属性在给定的 Javascript 对象数组下过滤的帮助。

我有一个反应应用程序,当用户在搜索框中键入字符串时,我想在其中过滤文章,但我的问题与仅过滤对象有关,它的子数组值。

// 我的 JSON 对象

this.state = {
 articles: [
    {title: 'title 1', tags :["JavaScript", "ES6"], category: "JavaScript"},
    {title: 'title 2', tags :["React", "TypeScript"], category: "React"},
    {title: 'title 3', tags :["JavaScript", "Inheritance", "Prototype"], category: "JavaScript"}
 ]
};
Run Code Online (Sandbox Code Playgroud)

// 需要输出

// If user start typing in searchbox like "jav" then it should filter only those items which tags name matching with "jav". Tags is an Array

 [
    {title: 'title 1', tags :["JavaScript", "ES6"], category: "JavaScript"},
    {title: 'title 3', …
Run Code Online (Sandbox Code Playgroud)

javascript arrays filter reactjs

2
推荐指数
1
解决办法
3456
查看次数