2015-11-07 26 views
0

我在调查为使用React.js的项目创建一个小型Twilio应用程序。我很擅长React和JavaScript(但不是专家),但我遇到了一些麻烦。使用React.js和Twilio API时出错

最初,我试图将帐户上的所有消息加载到网页。这里是我有的代码:

import React from 'react' 
import {connect} from 'react-redux' 

var accountSid = '####'; 
var authToken = "####"; 
var client = require('twilio')(accountSid, authToken); 

var msgList = [] 

const messages =() => { 
    client.messages.list(function(err, data) { 
    data.messages.forEach(function(message) { 
     msgList.push(message) 
    }); 
    }) 
    return msgList 
} 

class LandingPage extends React.Component { 
    render() { 
    return (
     <h1>Hello!</h1> 
    ) 
    } 
} 

export default connect(select)(LandingPage) 

(当然,还有更多的文件,但这是我目前的工作文件,我有问题)。

首先,当我在浏览器中加载这个了,我在控制台得到一个错误:

Uncaught TypeError: querystring.unescape is not a function 

这显然涉及client.messages.list(function(err, data) {线。

另外,我将如何去渲染每个message.body?我想我将不得不使用for循环,但我不确定那里会去哪里。

回答

3

您尝试使用的库是为Node.js编写的,我假设您尝试在浏览器或React Native中使用它?几位:

  • 您不应该使用客户端应用程序中的Twilio API和您的帐户SID和身份验证令牌。这些凭证是Twilio帐户的“王国的钥匙”,如果您将它们放在任何客户端应用程序中,这些凭证可能会受到影响。

  • 您尝试使用的模块是为Node.js编写的,并且可能无法在浏览器中使用。我没有对它进行测试,但是如果您要以这种方式打包前端代码,它可能与Browserify一起使用。

对于你想实现用例的,我想你的服务器上获取信息,并通过Ajax发送到客户端,而不是直接从客户端击中API。

+0

嘿凯文,谢谢你的建议!我知道有关SID和身份验证令牌的安全问题,但不知道如何解决这些问题,所以我将查看使用Node和Ajax,谢谢。此外,我还没有想到,我使用的Twilio代码是用于Node的,因此必须位于Node环境中。所以谢谢,我会研究使用Browserify :) –