反应 - 无法在 Object.keys(obj).map 中渲染 html

Question

I'm building this app with a form in which you input fields as providers, keywords and quantity and hitting "search" it opens a modal with the results of different ajax calls.

The flow works fine, but when it comes to show the results into the modal, nothing is displayed. This is the code for my modal.

<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" is an object that collects localStorage values that change every time I search for products of each provider, resulting in something like this:

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

This is my switchProvs function:

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

And finally, this is the providernRender function (all perform the same task, even if with different renders):

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
}

The modal body is empty when I perform this actions, but if I add a console.log inside the provider2Render, it is fired. So the problem is that the functions work (or at least the app enters them when required), but nothing is returned as html.

Answer 1

Object.keys(ls) will return an array of objects based on your data. As you are trying to access value from ls using ls[key] will return undefined as it's an array. You need to use an index instead.

Let's consider the following example

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>) :
       ''
} )  

You can read more about

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