在react条件返回中使用API JSON数据
在react条件返回中使用API JSON数据
提问于 2018-11-03 06:59:46
我有一个小型的(从未用于生产) Express/React应用程序，我正在验证快递中的散列引脚，如果验证失败返回message: false，如果验证成功则返回message: <cardnumber>。在我的反应前端，我想最终重定向，如果它返回一个卡号，但首先，我只是尝试有条件地呈现一个组件。
我有一个json响应的构造函数。
constructor() {
super();
this.state = {
cardnumber: '',
pin: '',
servercardnumber: {
message: ''
}
};然后我会从API中得到这样的数据
const url = '/api/login';
const serverResponse = await fetch(url, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': true
},
body: JSON.stringify(data)
});
const json = await serverResponse.json();
console.log(json);
this.setState(
prevState => {
return {
servercardnumber: json.cardnumber
};
},
() => {
console.log(this.state.cardnumber);
}
);
};然后，我试图在react返回中有条件地呈现一个重要的ui组件
render() {
const { cardnumber, pin, servercardnumber } = this.state;
return (
<React.Fragment>
<Card>{!servercardnumber ? <Card> Server says no</Card> : null}</Card>
{console.log('server says:')}
{console.log(servercardnumber)}{console.log(servercardnumber)}首先返回正确的服务器号，然后返回未定义的服务器号。
我需要的是在我的条件呈现中看到响应，如果登录是成功的，则显示呈现的组件(如果不是成功的，只要我让它有条件地呈现)。
我对这段代码做了很多修改，试图让它正常工作，所以看起来有点混乱。
相关文件的完整前端代码:相关文件的https://pastebin.com/VbdzmE4E服务器代码：https://pastebin.com/TZ35NZxa
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-11-03 07:16:22
在这里重贴我的评论，这样问题就可以解决了。
应该将状态属性servercardnumber设置为json.message而不是json.cardnumber。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53132510
复制相关文章
相似问题
腾讯云开发者
