Реагировать - не удается отобразить html в Object.keys (obj) .map

Question

Я создаю это приложение с формой, в которой вы вводите поля в качестве поставщиков, ключевых слов и количества, и, нажимая «поиск», он открывает модальное окно с результатами различных ajax вызовов. работает нормально, но когда дело доходит до отображения результатов в модальном окне, ничего не отображается. Это код для моего модального окна.

<Modal
                size="lg"
                show={lgShow}
                //onShow={ (() => loadHtml(html)) }
                //onAfterOpen={ (() => onAfterOpen(html)) }
                onHide={ (() => onHide(lgShow)) }
                aria-labelledby="example-modal-sizes-title-lg"
                className={`fade modal ${client}-results`}
            >
            <Modal.Header closeButton>
            <Modal.Title id="example-modal-sizes-title-lg">
                Your products
            </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                {   
                    Object.keys(ls).map( key => {
                        ls[key] !== null ?
                        switchProvs(key) :
                        ''
                    } )
                }
            </Modal.Body>
            </Modal>

«ls» - это объект, который собирает значения localStorage, которые меняются каждый раз, когда я ищу продукты каждого поставщика, в результате получается что-то вроде этого:

const ls = {
  provider1: localStorage.getItem('provider1'),
  provider2: localStorage.getItem('provider2'),
  provider3: localStorage.getItem('provider3')
}

Это моя функция switchProvs:

const switchProvs = ( obj, key ) => {
    switch(key){
        case 'provider1':
            JSON.parse(obj[key]).map( (provider1) => provider1Render(provider1, props) ) 
            break;
        case 'provider2':
            JSON.parse(obj[key]).map( (provider2) => provider2Render(provider2, props) ) 
            break;
        case 'provider3':
            ...
            break;
    }
}

И, наконец, это функция providernRender (все выполняют одну и ту же задачу, даже если с разными рендерами):

export const provider2Render = ( provider2, props ) => {
const { attributes: {offers} } = props;

const p = provider2
const id = provider2.someVal

const html = <div className="prod">
                <figure className="prod-image">
                    <small>Provider2</small>
                </figure>
                <div className="prod-content">
                    <strong>{ p.ItemInfo.Title }</strong>
                    <div className="prod-meta" id={id}>
                        <ButtonAdd offerid={id} props={props} clicked={clicked(offers, 'provider2', id)} />
                    </div>
                </div>
            </div>
            
localStorage.removeItem('provider2');

return html
}

Когда я выполняю эти действия, модальное тело пусто, но если я добавляю console.log внутри provider2Render, он запускается. Итак, проблема в том, что функции работают (или, по крайней мере, приложение вводит их при необходимости), но ничего не возвращается как html.

Answer 1

Object.keys(ls) вернет массив объектов на основе ваших данных. Когда вы пытаетесь получить доступ к значению из ls, используя ls[key], вернет undefined, поскольку это массив. Вместо этого вам нужно использовать индекс.

Рассмотрим следующий пример

var ls = {
  provider1: "some object from localstorage",
  provider2: "some object from localstorage",
  provider3: "some object from localstorage"
}

// Object.keys(ls) will return [{some object from localstorage},{some object from localstorage},{some object from localstorage}]

//Now when you map over the Object.keys(ls) you'll get 'key' as an individual element

//To access the object properly you need to get it by index. i.e

Object.keys(ls).map((key,index) => {
       ls[index] !== null ?
       switchProvs(ls[index],ls[index].<provider key name>) :
       ''
} )  

Подробнее о

Object.keys ([]): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Array.map (fn): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map