我有一个带有以下组件的React应用程序：
import React from 'react';
import PropTypes from 'prop-types';
import { isDelayN, isDelayS } from '../utils/api';
function IsDelayN (props) {
isDelayN(props.sub, props.stop);
if (props.stop === null) {
return (null);
} else if (isDelayN.noDelay) {
return (<p>The next train will arrive in {isDelayN.noDelay} minutes.</p>);
} else if (isDelayN.yesDelay <= 10) {
return (<p>A {isDelayN.yesDelay} delay isn't that big a deal, right?</p>);
} else if (isDelayN.yesDelay > 10 && isDelayN.yesDelay <= 15) {
return (<p>Oof, you've got a {isDelayN.yesDelay} minute delay. You should let your boss/friends/Tinder date know you're going to be late.</p>);
} else {
console.log(isDelayN.noDelay);
return (<p>So... The MTA's reporting a {isDelayN.yesDelay} minute delay for you right now. Tbh, wherever you're headed, you might as well call out sick.</p>);
}
}
function IsDelayS (props) {
isDelayS(props.sub, props.stop);
if (props.stop === null) {
return (null);
} else if (isDelayS.noDelay) {
return (<p>The next train will arrive in {isDelayS.noDelay} minutes.</p>);
} else if (isDelayS.yesDelay <= 10) {
return (<p>A {isDelayS.yesDelay} delay isn't that big a deal, right?</p>);
} else if (isDelayS.yesDelay > 10 && isDelayN.yesDelay <= 15) {
return (<p>Oof, you've got a {isDelayS.yesDelay} minute delay. You should let your boss/friends/Tinder date know you're going to be late.</p>);
} else {
return (<p>So... The MTA's reporting a {isDelayS.yesDelay} minute delay for you right now. Tbh, wherever you're headed, you might as well call out sick.</p>);
}
}
export { IsDelayN, IsDelayS };
当使用props.stop === null呈现它时，它的行为完全符合我的预期。但是，当props.stop不是null时，条件呈现会直接跳到else语句，并且在{isDelay.yesDelay}中也不会呈现任何内容。
这使我相信noDelay和yesDelay属性未定义，尽管我的测试工作正常。作为参考，这是创建这些属性的代码：
import GtfsRealtimeBindings from 'mta-gtfs-realtime-bindings';
import rp from 'request-promise';
function getFeedData (sub) {
var feedId;
switch (sub) {
case '1': case '2': case '3': case '4': case '5': case '6': case 'S':
feedId = 1;
break;
case 'A': case 'C': case 'E':
feedId = 26;
break;
case 'N': case 'Q': case 'R': case 'W':
feedId = 16;
break;
case 'B': case 'D': case 'F': case 'M':
feedId = 21;
break;
case 'L':
feedId = 2;
break;
case 'G':
feedId = 31;
break;
}
rp({
method: 'GET',
url: 'https://cors-anywhere.herokuapp.com/http://datamine.mta.info/mta_esi.php?key=5db5e052519d17320f490738f2afe0d5&feed_id=' + getFeedData.feedId,
encoding: null
}).then((buf) => {
const feed = GtfsRealtimeBindings.transit_realtime.FeedMessage.decode(buf);
return { feed: feed };
});
}
function reverseStop (sub, stop) {
var stopIdN;
var stopIdS;
var stopData = require('./stops');
var invalidEntries = 0;
function filterByName (item) {
if (item.stop_name == stop && typeof item.stop_id === 'string' && item.stop_id.charAt(0) == sub) {
return true;
}
invalidEntries++;
return false;
}
var stopObjs = stopData.filter(filterByName);
for (var i = 0; i < stopObjs.length; i++) {
if (stopObjs[i].stop_id.charAt(stopObjs[i].stop_id.length - 1) == 'N') {
stopIdN = stopObjs[i].stop_id;
} else if (stopObjs[i].stop_id.charAt(stopObjs[i].stop_id.length - 1) == 'S') {
stopIdS = stopObjs[i].stop_id;
}
}
return {
stopIdN: stopIdN,
stopIdS: stopIdS
};
}
export function isDelayN (sub, stop) {
var arrivals = [];
var delays = [];
reverseStop(sub, stop);
getFeedData(sub);
function dataFilter () {
var invalidEntries = 0;
var feedObjs = getFeedData.feed.filter(function (feedObj) {
if (feedObj.entity.trip_update.stop_time_update.stop_id == reverseStop.stopIdN) {
return feedObj.entity.trip_update.stop_time_update;
}
});
for (var i = 0; i < feedObjs.length; i++) {
arrivals.push(feedObjs.arrival.time.low);
delays.push(feedObjs.arrival.delay);
}
}
var nextArrival = Math.min(...arrivals);
var delayIndex = arrivals.indexOf(nextArrival);
var delay = delays.delayIndex;
if (delay === null || Math.ceil(delay / 60) <= 5) {
var noDelay = Math.ceil((nextArrival - getFeedData.feed.header.timestamp.low) / 60);
return { noDelay: noDelay };
} else {
var yesDelay = Math.ceil(delay / 60);
return { yesDelay: yesDelay };
}
}
export function isDelayS (sub, stop) {
var arrivals = [];
var delays = [];
reverseStop(sub, stop);
getFeedData(sub);
function dataFilter () {
var invalidEntries = 0;
var feedObjs = getFeedData.feed.filter(function (feedObj) {
if (feedObj.entity.trip_update.stop_time_update.stop_id == reverseStop.stopIdS) {
return feedObj.entity.trip_update.stop_time_update;
}
});
for (var i = 0; i < feedObjs; i++) {
arrivals.push(feedObjs.arrival.time.low);
delays.push(feedObjs.arrival.delay);
}
}
var nextArrival = Math.min(...arrivals);
var delayIndex = arrivals.indexOf(nextArrival);
var delay = delays.delayIndex;
if (delay === null || Math.ceil(delay / 60) <= 5) {
var noDelay = Math.ceil((nextArrival - getFeedData.feed.header.timestamp.low) / 60);
return { noDelay: noDelay };
} else {
var yesDelay = Math.ceil(delay / 60);
return { yesDelay: yesDelay };
}
}
控制台还给出了以下错误：Unhandled rejection Error: Illegal wire type for unknown field 13 in Message .transit_realtime.FeedMessage#decode: 6。当我用Google搜索该错误消息时，我发现了这个问题（我在项目中使用的mta-gtfs-realtime-bindings包在protobufjs下有https://github.com/dcodeIO/protobuf.js/issues/358。https://github.com/dcodeIO/protobuf.js/wiki/How-to-read-binary-data-in-the-browser-or-under-node.js%3F。 protobufjs的创建者解释说“通常，这些错误会导致二进制数据被破坏。有一个关于该主题的维基页面：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
此外，有关如何手动检查二进制数据的几个示例，请参见：＃55。“
不幸的是，我不太了解读取二进制数据或关于Node以了解他的建议解决方案如何应用于我的项目。有人能给我一些见解吗？