在 React 组件的 function 内部循环

Question

（React web 应用开发）为了检查产品的当前库存状态，我使用产品的 ID 循环遍历 json 数据。 我正在尝试通过键（id）从 json（下）检索“DATAPAYLOAD”的值。 idsent 是从另一个组件传递的字符串。 但是“if (Data.response[i].id === idsent)”这个条件似乎总是错误的，因为我在控制台中“失败”了。 如果有人可以查看以下代码并给我一些建议，那将非常有帮助，在此先感谢！

onButtonClicked = () => {
        const idsent="D56F36C6038DFC8244F"
        for (var i = 0; i < Data.response.length; i++) {
            if (Data.response[i].id === idsent) {
                name = Data.response[i].DATAPAYLOAD;
                const word = '<INSTOCKVALUE>INSTOCK</INSTOCKVALUE>';
                if (name.includes(word)) {
                    return true;
                }
                else {
                    return false;
                }
            }
            console.log("failed");
        }

以下是通过 fetch get-method 请求的 json 数据的一部分。

Data=    {
    "code": 200,
    "response": [
        {
            "id": "CED62C6F96BD0E21655142F",
            "DATAPAYLOAD": "<AVAILABILITY>\n  <CODE>200</CODE>\n  
            <INSTOCKVALUE>OUTOFSTOCK</INSTOCKVALUE>\n</AVAILABILITY>"
        },
        {
            "id": "D56F36C6038DFC8244F",
            "DATAPAYLOAD": "<AVAILABILITY>\n  <CODE>200</CODE>\n  
            <INSTOCKVALUE>LESSTHAN10</INSTOCKVALUE>\n</AVAILABILITY>"
        },
        {
            "id": "4536C9E608B563A749",
            "DATAPAYLOAD": "<AVAILABILITY>\n  <CODE>200</CODE>\n  
             <INSTOCKVALUE>INSTOCK</INSTOCKVALUE>\n</AVAILABILITY>"
        },
        {
            "id": "3A576872130625CABFADEE68",
            "DATAPAYLOAD": "<AVAILABILITY>\n  <CODE>200</CODE>\n  
            <INSTOCKVALUE>INSTOCK</INSTOCKVALUE>\n</AVAILABILITY>"
        }
    ]
}

再次感谢你。

Answer 1

你可能想要console.log("failed"); 在for循环之外，如下所示（以便它仅在处理完所有数据后执行）：

onButtonClicked = () => {
        const idsent="D56F36C6038DFC8244F"
        for (var i = 0; i < Data.response.length; i++) {
            if (Data.response[i].id === idsent) {
                name = Data.response[i].DATAPAYLOAD;
                const word = '<INSTOCKVALUE>INSTOCK</INSTOCKVALUE>';
                if (name.includes(word)) {
                    return true;
                }
                else {
                    return false;
                }
            }
        }
        console.log("failed");

Answer 2

获取成功后，需要使用 json() 读取并解析数据。 请读这个

    onButtonClicked = async () => {
        const idsent="D56F36C6038DFC8244F"
        Data = await Data.json();  // json() will create a promise
        for (var i = 0; i < Data.response.length; i++) {
            if (Data.response[i].id === idsent) {
                name = Data.response[i].DATAPAYLOAD;
                const word = '<INSTOCKVALUE>INSTOCK</INSTOCKVALUE>';
                if (name.includes(word)) {
                    return true;
                }
                else {
                    return false;
                }
            }
            console.log("failed");
        }

Answer 3

您失败的原因是因为第一次通过时，ID 与发送的 ID 不匹配，因此控制台会记录“失败”消息。 然后第二次通过 for 循环匹配数据，然后点击下一个 if，它检查值。 由于您要搜索的值包含在数据中，因此它返回 true 并退出 for 循环。 您看到失败日志的原因是因为您在 id 不匹配时进行记录，并且该数组中有 3 条 id 不匹配的记录，第一个是其中之一。