使用三元运算符通过数组映射有条件地呈现

Question

我正在尝试有条件地从json 占位符呈现数组的项目，方法是使用三元运算符确定数组是否有任何项目，然后 map 通过它，并返回项目。 如果不是，则返回一条消息表明是这样。 我已经搜索过我的语法是否/哪里错误但无济于事。

这是我所拥有的：

import React, { useEffect, useState } from "react";
import { fetchUsers } from "../../lib/functions";

const Users = () => {
    const [users, setUsers] = useState([]);

    useEffect(() => {
        fetchUsers().then(res => setUsers(res.data))
    }, []);
    return (
        <div className="users">
            <h1>Users</h1>
            {users.length ? users.map((user) => {
                (<div key="id">
                    <h4>{users.name}</h4>
                    <h5>{users.email}</h5>
                    <h6>{users.username}</h6>
                    <p>{users.address}</p>
                </div>) :
                (
                    <div>
                        <p>User not found.</p>
                    </div>
                )})}
        </div>
    );
}


export default Users;

它向我抛出这个错误：

[eslint] src/components/users/Users.js 行 19:23 中的错误：解析错误：缺少分号。 (19:23)

webpack 编译有 2 个错误

Answer 1

看来您对ternary operator的使用是错误的。 只有第一个div应该在map中，但根据您的代码，两个div都在map中。

{users.length ? users.map((user) => 
  (<div key="id">
    <h4>{users.name}</h4>
    <h5>{users.email}</h5>
    <h6>{users.username}</h6>
    <p>{users.address}</p>
  </div>))
  :
  (<div>
    <p>User not found.</p>
  </div>)
}

Answer 2

缺少返回 map function 不会自动返回一个值，您需要指定返回什么，如下所示：

{users.length ? users.map((user) => {
                return (<div key="id">
                    <h4>{users.name}</h4>
                    <h5>{users.email}</h5>
                    <h6>{users.username}</h6>
                    <p>{users.address}</p>
                </div>) :
                (
                    <div>
                        <p>User not found.</p>
                    </div>
                )})}