Question

<div>
    {!props.isLoading && <div>

        {normalizedData.map((outerObj,index) => {

            {
                <p className="space_name">
                    {outerObj.space_name}
                </p>
            }

            return(outerObj.applicants.map((obj,i) => {
                return (
                    <div>
                        <div>
                            {renderDetail(obj)}
                        </div>
                    </div>
                )
            }))
        })}
    </div>}
</div>

出于某种原因，我必须使用{}和return，因为我想在map中进行一些数据操作，但不知怎的，我没有看到我的space_name渲染，但renderDetail很好。

Answer 1

当您需要在地图中返回多个元素时，您需要将所有元素包装在return语句中的单个div中。因此，将P标记更改为返回div。

<div>
    {!props.isLoading && <div>

    {normalizedData.map((outerObj,index) => {
        return(
            <div>
                 <p className="space_name">
                     {outerObj.space_name}
                  </p>

                  {outerObj.applicants.map((obj,i) => {
                      return (
                           <div>
                               <div>
                                   {renderDetail(obj)}
                               </div>
                           </div>)
                   })}
             </div>
     })}
     </div>}
</div>

Answer 2

的变化：

1。我们无法返回多一个元素，因此请将div中第一个地图内的所有元素包裹起来。

2。在return内使用map。

3。不需要在p内包装{}标记（任何html元素）。

这样写：

<div>
    {!props.isLoading && <div>
        {normalizedData.map((outerObj,index) => {
            return (
                <div>
                    <p className="space_name">
                        {outerObj.space_name}
                    </p>
                    {
                        outerObj.applicants.map((obj,i) => {
                            return (
                                <div>
                                    <div>
                                        {renderDetail(obj)}
                                    </div>
                                </div>
                            )
                    })}
                </div>
            )}
        )}
    </div>
    }
</div>

Answer 3

问题在于您如何使用箭头功能。当您使用{}包装它时，您需要返回一些内容。但是，当您使用()包装jsx时，它将直接返回内容对象，例如：

const fn1 = () => {
  return { num: 1 }
}

const fn2 = () => ({
  num: 2
})

fn1(); // { num: 1 }
fn2(); // { num: 2 }

因此您可以像这样重写代码：

<div>
  {!props.isLoading &&
    <div>
      {normalizedData.map((outerObj,index) => (
        <div>
          <p className="space_name">
            {outerObj.space_name}
          </p>
          {outerObj.applicants.map((obj,i) => (
            <div>
              <div>
                {renderDetail(obj)}
              </div>
            </div>
          ))}
        </div>
      ))}
    </div>
  }
</div>

地图没有呈现内容

3 个答案: