javascript - Can't update state array using hooks on findIndex condition

Question

I have a bunch of data as such

const myArr = [
    { test1: "", test2: "a", exercises: [{ exercise: "bench", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "squat", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "shoulder", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "deadlift", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "deadlift", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "squat", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "bench", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "bench", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "shoulder", sets: 2 }] },
    { test1: "", test2: "b", exercises: [{ exercise: "shoulder", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "shoulder", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "bench", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "squat", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "situps", sets: 2 }] },
];

I am trying to store each 'exercise' that is listed, I don't need a tally of them just if it occurs once, stick it into the state array and ignore it if it comes up again so as not to add it again. i.e as an example

const results = ['Deadlift', 'Bench', 'Squats', 'Shoulder']

Outside of react, I could just use something as such and I'd store each value the one time:

const storage = [];

for (let item of myArr) {
    for (let i of item.exercises) {
        if (storage.findIndex((v) => v === i.exercise) === -1) {
            storage.push(i.exercise);
        }
    }
}
console.log(storage);

However I can't get this to work within useEffect and useState hooks. Say I have the same data, If I do the same script inside useEffect it pays no attention to whether the string is already inside the state hook array, and will just seemingly add it anyway, regardless of my findIndex condition. So I end up with each exercise repeating however many times it occurs within the data as opposed to just the single reference to it.

useEffect(() => {
        if (allEntries.loaded) {
            for (let item of allEntries.entries) {
                for (let i of item.exercises) {
                    if (myState.findIndex((v) => v === i.exercise) === -1) {
                        setMyState((prev) => [...prev, i.exercise]);
                    }
                }
            }
        }
    }, [allEntries]);

Can someone explain where I've gone wrong?

Answer 1

flatMap and Set:

const myArr = [ <your data> ]
const uniqueExercises = [
  ...new Set(myArr.flatMap(x => x.exercises).map(x => x.exercise))
]

directly with setState:

setState([
  ...new Set(entries.flatMap(x => x.exercises).map(x => x.exercise))
])

const myArr = [
    { test1: "", test2: "a", exercises: [{ exercise: "bench", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "squat", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "shoulder", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "deadlift", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "deadlift", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "squat", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "bench", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "bench", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "shoulder", sets: 2 }] },
    { test1: "", test2: "b", exercises: [{ exercise: "shoulder", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "shoulder", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "bench", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "squat", sets: 2 }] },
    { test1: "", test2: "a", exercises: [{ exercise: "situps", sets: 2 }] },
];
console.log([...new Set(myArr.flatMap(x => x.exercises).map(x => x.exercise))])