React - problem z wywołaniem wartości z Tablicy z użyciem props

Question

Witam ponownie.

Znów utknąłem na drobiazgu, którego jednak nie mogę strawić.

Mam coś takiego:

Main.js:

...
<>

 <Message keyWord="a"/>
 <Message keyWord="b"/>
 <Message keyWord="c"/>

</>

Message.js

import React, { useState } from 'react'

function Message(props) {

    const aFatePack = ['plusA', 'noneA', 'minusA']
    const bFatePack = ['plusB', 'noneB', 'minusB']
    const cFatePack = ['plusC', 'noneC', 'minusC']

    const [temp, setTemp] = useState(props.keyWord)
    const [temp2, setTemp2] = useState(`${props.keyWord}FatePack`)
    const [temp3, setTemp3] = useState(`${props.keyWord}FatePack`[1])

    return (
        <div>         
            tempA: {temp}
            <br></br>
            tempB: {temp2}
            <br></br>
            tempC: {temp3}
            <br></br>
            keyWord: {props.keyWord}
            
        </div>
    )
}

export default Message

{temp} oraz {temp2} - działa, ale {temp3} - już nie działa.

Proszę o wskazanie lub podpowiedzenie, gdzie popełniam błąd.

Dziękuję :-)

Comments

const [temp3, setTemp3] = useState(`${props.keyWord[1]}FatePack`)

 

na tym forum precyzuj naprawdę dobrze wiadomości bo powoli zamienia się w elektrode, poprosiles o podpowiedzenie gdzie jest błąd i zaraz ktos ci napisze "w kodzie" i tyle, zasilacz z czarnej listy, zamykam.

---

{temp} oraz {temp2} - działa, ale {temp3} - już nie działa.

@sKodowany, jesteś pewien, że temp2 działa tak jak oczekujesz? Na oko, zmienna temp2 zawiera string "aFatePack", a nie tablicę (wartość zmiennej aFatePack) - i to się tyczy pozostałych przypadków, gdzie props.keyWord jest wartością "b" i "c".

@yapyap, `${props.keyWord[1]}FatePack` to również nie powinno działać, bo jeśli props.keyWord jest jedno znakowym stringiem, to indeks [1] zwraca undefined, więc wynikiem jest string "undefinedFatePack". I to także zwraca string, a nie tablicę przypisaną do zmiennej o tej nazwie.

---

temp2 - jest tylko przykładem, że szukałem rozwiązania krok po kroku - sprawdzając, czy w ogóle jestem w stanie wyświetlić stringa będącego zarazem nazwą tablicy.

Ale dziękuję za czujność - ;-)

Answer 1

Jeśli dobrze rozumiem, co chcesz zrobić, to stworzyłbym obiekt, którego kluczami będą wartości (w pokazanym przykładzie - litery) przekazywane przez props.keyWord, a wartościami tablice. Taka struktura nie będzie wymagać używania interpolacji do operowania na niej.

    // niech props.keyWord === 'a'

    const fatePacks = {
        a: ['plusA', 'noneA', 'minusA'],
        b: ['plusB', 'noneB', 'minusB'],
        c: ['plusC', 'noneC', 'minusC'],
    };
 
    const [temp, setTemp] = useState(props.keyWord)
    const [temp2, setTemp2] = useState(fatePacks[props.keyWord]) // ['plusA', 'noneA', 'minusA']
    const [temp3, setTemp3] = useState(fatePacks[props.keyWord][1]) // 'noneA'
 

W przykładzie z odczytem indeksu 1 (tworzenie temp3) założyłem, że chodzi Ci wydobycie pierwszego elementu tablicy.

Comments

Ooo,

No tak - z chwilą, gdy tylko zobaczyłem słowo 'obiekt' - dotarło do mnie, że to jedno z rozwiązań!

Dziękuję - zmienię na obiekt i wykorzystam ten model myślenia w przyszłości.

Pozdrawiam uprzejmie,

S. ;-)