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
}

执行此操作时，模式主体为空，但是如果我在provider2Render中添加console.log，则会将其触发。因此，问题在于这些功能可以正常工作（或者至少在需要时应用可以输入这些功能），但是没有返回任何HTML格式。

Answer 1

Object.keys(ls)将根据您的数据返回一个对象数组。当您尝试使用ls[key]从ls访问值时，它将返回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

反应-无法在Object.keys（obj）.map中呈现html

1 个答案: