.map中的条件if语句

Question

我想读取preferred_part，如果它是真，就应该显示checkmark，如果它是假，就不会显示任何东西。这是我下面的代码，我得到的错误是。

TypeError: Cannot read property 'substring' of undefined.

我甚至不知道我应该如何以其他方式读取首选部分的布尔值。任何形式的帮助都将被感激。请告诉我如何解决这个问题。我是一个新的反应。谢谢你！我想读取preferred_part的布尔值。

async function getParts() {
    console.log("Getting parts...");
    const res = await fetch("http://localhost:5000/lookup");
    const data = await res.json();
    setParts(data);
}

useEffect(() => {
    getParts();
}, []);

function formatLightState() {
    if (parts.preferred_parts = true) {
        return parts.tps_part_number + " - " + parts.manufacturer + " (" + parts.technical.substring(0, 95) + " ✔" + ")"
    }
    else {
        return parts.tps_part_number + " - " + parts.manufacturer + " (" + parts.technical.substring(0, 95) + ")"
    }
}

const partsList = parts.map((option) => ({
    manufacturer: option.manufacturer,
    technical: option.technical,
    tps_part_number: option.tps_part_number,
    value: option.part_key,
    quote_price: option.quote_price,
    vendor_name: option.vendor_name,
    vendor_id: option.vendor_key,
    label: formatLightState(),
}));

Answer 1

目前 parts 是一个数组，这就是为什么你要调用 .map() 那里。它没有财产 technical 而不是数组中的项目。

在此基础上，你需要将 option 到 formatLightState 代表你的数组中的当前迭代元素，因此你可以在数组中使用它。也可以用 = 你需要使用 === 因为 = 是用来赋值的，第二个是检查平等。此外，你还可以使用三元运算符来检查你是否有喜欢的部分，这样你就可以添加勾。从 文件:

条件（三元）运算符是唯一一个接受三个操作数的JavaScript运算符：一个条件，后面是一个问号（？），然后是一个表达式，如果条件是真实的，则执行，后面是一个冒号（：），最后是一个表达式，如果条件是虚假的，则执行。这个操作符经常被用作if语句的快捷方式。

试作如下。

function formatLightState(option) {
    const ending = option.preferred_parts ? ' ✔' : '';
    return option.tps_part_number + ' - ' +
           option.manufacturer +
           ' (' + option.technical.substring(0, 95) + ending + ')';
}

const partsList = parts.map((option) => ({
    manufacturer: option.manufacturer,
    technical: option.technical,
    tps_part_number: option.tps_part_number,
    value: option.part_key,
    quote_price: option.quote_price,
    vendor_name: option.vendor_name,
    vendor_id: option.vendor_key,
    label: formatLightState(option),
}));

我还会考虑检查 option.technical 因为如果长度小于或等于 95. 我将检查如下。

const { technical } = option;
const shortTechnical = technical.length > 95 ? technical.substring(0, 95) : technical;

我希望这能帮助你！

Answer 2

你需要等待 getParts() 未完待续 parts.map()

另外，这也是错误的。

if (parts.preferred_parts = true) {

你是想设置 parts.preferred_parts 为true，而不是检查它的值是否为真。

Answer 3

试试这个。

async function getParts() {
    console.log("Getting parts...");
    const res = await fetch("http://localhost:5000/lookup");
    const data = await res.json();
    await setParts(data);

    const partsList = parts.map((option) => ({
        manufacturer: option.manufacturer,
        technical: option.technical,
        tps_part_number: option.tps_part_number,
        value: option.part_key,
        quote_price: option.quote_price,
        vendor_name: option.vendor_name,
        vendor_id: option.vendor_key,
        label: formatLightState(),
    }));
}

useEffect(() => {
    getParts();
}, []);

function formatLightState() {
    if (parts.preferred_parts = true) {
        return parts.tps_part_number + " - " + parts.manufacturer + " (" + parts.technical.substring(0, 95) + " ✔" + ")"
    }
    else {
        return parts.tps_part_number + " - " + parts.manufacturer + " (" + parts.technical.substring(0, 95) + ")"
    }
}