JSX 中 .map 循环中的 if-else 语句答案

【问题标题】：If-else statement in .map loop in JSXJSX 中 .map 循环中的 if-else 语句
【发布时间】：2021-07-17 16:31:13
【问题描述】：

Instagram 克隆：

我想检查我是否关注了我的关注者然后显示<button>unfollow</button> 或者如果不显示<button>follow</button>

var IfollowAndHeFollowMe;

myfollowers.map(follower => {
     return(
       <div>
          <div>{follower.userName}</div>
          { IfollowAndHeFollowMe = 
            myfollowings.filter((following) => following.userName == follower.userName)
          }


          // this doesn't work

         { IfollowAndHeFollowMe.length > 0 ? return( <button>unfollow</button>): return(<button>follow</button>) }


         // and this also doesn't work

         { return IfollowAndHeFollowMe.length > 0 ? <button>unfollow</button> : <button>follow</button>}


       </div>
    )
})

//https://instagram-app-clone.netlify.app/ --- 仅适用于手机 ---

【问题讨论】：

标签： javascript html reactjs jsx

【解决方案1】：

// 现在没有错误，但它总是显示带有跟随文本的按钮

{Data[2][0].followers.map(follower => {
                idFollowers++;

                return (

                    <div className="follower" id={idFollowers}  >
                        <img src={follower.profilna} className="profilnaFollower" alt="" />

                        <div className="userInfoFollower">
                            <h3>{follower.userName}</h3>
                            <p>{follower.name}</p>
                        </div>

                        {dbFollow = Object.entries(Data[2][0].following).filter(following => following.userName == follower.userName)}
                        {dbFollow.length > 0 ? (<button>unfoldasdaslow</button>) : (<button>fodsadsllow</button>)}
                    </div>
                )
            })}
        </div>

【讨论】：

看起来是正确的，错误是什么？
它的 dbFollow 不能是对象，因为 follow1 是对象。必须是数组或字符串，它将使用 .filter() 设置 following1 但我想 dbFollow 是 following1.userName 而不是对象
对象作为 React 子对象无效（发现：对象与键 {userName, name, profilna, posts}）。如果您打算渲染一组子项，请改用数组。
如果您收到上面共享的此错误：Uncaught Error: Objects are not valid as a React child (found: object with keys {userName, name, profImg, posts}). If you meant to render a collection of children, use an array instead. 那么问题是您在对象上使用数组方法。
问题出在这里：{dbFollow = following.filter(following1 => following1.userName == follower.userName

【解决方案2】：

{} 中的 JSX 代码应该写成语句。

https://reactjs.org/docs/conditional-rendering.html

const followers = ['John', 'Hanna'];

function RenderMap() {
    return (
        <React.Fragment>
            {followers.map(follower => (
                <div>
                    <span>{follower}</span>
                    {followers.length > 0 ? (
                        <button>unfollow</button>
                    ) : (
                        <button>follow</button>
                    )}
                </div>
            ))}
        </React.Fragment>
    );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：

不退货？？
是的，这就是 Javascript 三元运算符的工作原理。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
未捕获的错误：对象作为 React 子项无效（发现：带有键 {userName, name, profImg, posts} 的对象）。如果您打算渲染一组子项，请改用数组。
{ IfollowAndHeFollowMe = myfollowings.filter(following => following.userName == follower.userName) }
这很糟糕，你能帮帮我吗？