Question

我有一个组件利用node-horseman登录Google并操纵Google快讯的用户界面，创建RSS Feed。在我的项目中，我检查用户是否有模块生成的cookies.txt文件，以检查它是否应该登录Google或已经被允许创建RSS Feed。

我负责呈现表单的组件：

import React, { Component, PropTypes } from 'react'
import NewRSSForm from './NewRSSForm'
import LoginForm from './LoginForm'

class GoogleAlerts extends Component {
  render() {
    const {
      hasCookies,
      createRSSFeed,
      createRSSFeedSuccess,
      loginGoogle,
      loginGoogleSuccess
    } = this.props

    return (
      <div>
        {
          hasCookies
            ? <NewRSSForm
                createRSSFeed={createRSSFeed}
                createRSSFeedSuccess={createRSSFeedSuccess}
              />
            : <LoginForm
                loginGoogle={loginGoogle}
                loginGoogleSuccess={loginGoogleSuccess}
              />
        }
      </div>
    )
  }
}

GoogleAlerts.propTypes = {
  hasCookies: PropTypes.bool,
  createRSSFeed: PropTypes.func,
  createRSSFeedSuccess: PropTypes.bool,
  loginGoogle: PropTypes.func,
  loginGoogleSuccess: PropTypes.bool,
}

export default GoogleAlerts

简单易行。端点检查用户id查找的文件是否存在，该文件是文件所在文件夹的名称，并返回true或false。

* hasCookies() {
  return fs.existsSync(User.cookiesLocation(this.id))
}

模型User有一个静态方法，用于返回存储和存储cookie的位置的默认路径：

static cookiesLocation(userID) {
  return `cookies/${userID}/cookies.txt`
}

通过检查返回的值，我可以清楚地看到它是正确的，无论是否存在文件的条件，但奇怪的是，当它false时，组件显示的形式是假设显示的时候true。我用console.log进行了测试，这也是正确的，但不知怎的，它坚持显示错误的结果。

Answer 1

你有两个问题：

（1）你没有调用那个hasCookies函数，所以没有评估它的返回值，而是它的类型（将评估为true的函数）

（2）hasCookies最有可能以string'false'或'true'而不是true或false的布尔字面值返回。

当javascript与非布尔文字进行比较时，它会从数据类型转换为布尔类型。

以下值转换为false：

空;
为NaN;
0;
空字符串（“”）; ＆LT; - 这个适用于你
未定义。

因此，当您希望“false”在三元表达式中求值为false时，它实际上会解析为true。

解决方案：

Answer 2

您没有检查hasCookies函数的返回值，而是检查该函数的引用（始终为真）。

检查以下简单示例：

someFunction = function() {
  return false;
}

console.log(!!someFunction);    //returns true
console.log(!!someFunction());  //returns false

我正在进行双重否定（!!）因为我们只对someFunction和someFunction()的布尔值评估感兴趣，因为这就是三元表达式所寻找的。

所以改变你的代码：

return (
  <div>
    {
      hasCookies()
        ? <NewRSSForm
            createRSSFeed={createRSSFeed}
            createRSSFeedSuccess={createRSSFeedSuccess}
          />
        : <LoginForm
            loginGoogle={loginGoogle}
            loginGoogleSuccess={loginGoogleSuccess}
          />
    }
  </div>
)

Answer 3

问题出在Redux上。访问路径时执行以下方法：

export function checkForCookies(id) {
  return {
    [CALL_API]: {
      endpoint: `/api/linked-accounts/users/${id}/has-cookies`,
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      types: [ HAS_COOKIES, HAS_COOKIES_SUCCESS, HAS_COOKIES_FAIL ]
    }
  }
}

...

[HAS_COOKIES_SUCCESS]: (state, action) => ({
  ...state,
  checkingCookies: false,
  checkCookiesSuccess: true,
  hasCookies: action.payload.hasCookies
}),

问题出在hasCookies: action.payload.hasCookies。我已经忘记从hasCookies访问payload，带来整个对象：

return ({hasCookies})

就像那样，它就像这样返回它，我正在测试Object，而不是它的值：

hasCookies: {
  hasCookies: true/false
}

当它应为TRUE时，Boolean为FALSE

3 个答案: