条件 if 语句在.map

Question

I would like to read the preferred_part and if it is true it should display checkmark and if it is false it won't display anything. This is the code I have below and the error I get is:

TypeError: Cannot read property 'substring' of undefined.

I don't even properly know how I should be able to read the boolean values of preferred part in any other way. Any sort of help will be appreciated. Please tell me how I can solve this issue. I am new to react. Thank you!

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

Currently parts is an array, that's why you are calling .map() there. It does not have property technical but instead the items of the array.

Based on that you need to pass option to formatLightState which represents the current element of the iteration from your array thus you can use that inside. Also instead of = you need to use === because = is used for assigning values the second one is checking equality. Additionally you can use ternary operator to check if you have the preferred part so you can add the tick. See from the documentation :

The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy. This operator is frequently used as a shortcut for the if statement.

Try as the following:

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),
}));

I would also consider checking the length of option.technical because it can throw and error if the length is less than or equal 95 . I would check as the following:

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

I hope this helps!

Answer 2

You need to wait for getParts() to finish before you can do parts.map()

Also, this is wrong:

if (parts.preferred_parts = true) {

You are trying to set parts.preferred_parts to true instead of checking if it's value is true.

Answer 3

Try This:

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) + ")"
    }
}