React中页面重新加载后的函数调用答案

【问题标题】：Function call after page reload in ReactReact中页面重新加载后的函数调用
【发布时间】：2017-06-26 12:36:40
【问题描述】：

我有这样的路线：

<Route component={Bar} path="/foo/:num"/>

我想在Bar 组件内渲染视图之前检查我的数据库中是否存在num。我正在尝试使用如下所示的component mounting 函数重定向到另一个路由，以防num 无效：

import React, { Component } from 'react';
import {browserHistory} from 'react-router';
import { isNumExist } from '../../services/index.js';

class Bar extends Component {

  componentWillMount(){
    if (!isNumExist(this.props.params.num)){
      browserHistory.push('/home');
    }
  }

  render() {
    ... 
  }
}

这里是index.js，定义isNumExist()：

let foo = [...]; // Contains an array fetched from database
function isNumExist(num){
  foo.map((element, i) => {
    if (foo[i].num == num) {
      return true;
    }
  });
  return false;
}

现在在每次重新加载页面时，isNumExist() 函数会触发两次，false 作为第二次输出。所以无论num 是否存在，页面都会重定向到给定的路由。如果我以错误的方式执行此操作，请纠正我，或者建议最好详细说明真正的问题。

【问题讨论】：

你的组件名称应该以大写开头，而不是bar，使用Bar
已更新，由于此处将真实代码替换为示例代码，这只是一个错字。感谢您强调
您的代码是否在数据库调用（我假设它是异步的）完成之前执行？
我已经注释掉了其余的代码，只是使用自定义数组作为let foo = [...]以确保一切运行良好。仍然有同样的问题

标签： javascript reactjs components react-router url-redirection

【解决方案1】：

您的函数将始终返回 false，因为不会返回 map 函数结果。

let foo = [...]; // Contains an array fetched from database
function isNumExist(num){
  foo.map((element, i) => {
    if (foo[i].num == num) {
      return true;
    }
  });
  return false;
}

foo.map(...) 将返回一个数组，但它不会在任何时候返回。 map 函数内部的函数的函数签名仅适用于该函数本身。

所以试试吧：

let foo = [...]; // Contains an array fetched from database
function isNumExist(num){
   var good_numbers_length = 0;
   var length = foo.map((element, i) => {
    if (foo[i].num == num) {
      good_numbers_length += 1;
    }
  });
  if (good_numbers_length > 0)
  {
        return true;
  }  
  return false;
}

此外，browserHistory.push('/home'); 不会创建正确的重定向。将其更改为 window.location = 'url' 之类的内容或类似 react-router 之类的反应友好的内容。

【讨论】：

是的，我已经尝试过对我有用的类似方法。我用false 声明了一个变量作为默认值，并在num 有效的情况下用true 更新它，并在函数结束时返回变量。
但在重定向之前，由于num在render()中使用了无效的num，它仍然会产生错误。在触发render()之前我应该怎么做重定向？
您确定browserHistory.push('/home'); 实际上是创建重定向的方式。似乎它只会修改您的历史记录。不应该是 window.location = 'url' 或类似的吗？
是的，刚刚确认问题出在 browserHistory，我将用 react-router 的重定向替换它。谢谢
很好，我会将那部分附加到答案中。

【解决方案2】：

你可以把它放在你的 react 的入口点文件中（通常命名为 app.js 或 index.js），每次加载页面时它只会被调用一次。

所以你只需要：

在入口点文件中导入历史依赖项
使用推送功能进入“/home”

【讨论】：