How to handle Error: Objects are not valid as React child?

Question

我有一组显示名称属性的对象。我成功地进行了映射，然后按字母顺序对名称列表进行了排序。然后我尝试通过输入输入来添加搜索栏和 filter/search，但出现了这个错误，我不知道如何解决，因为我对嵌套方法和括号有点困惑。（这里是新手！）

有人能找出问题所在吗？不确定是否需要我的代码的第二部分，但还是添加了它。对不起，它太长了。

未处理的拒绝（错误）：对象作为 React 子项无效（已找到：具有键 {id、名称、用户名、电子邮件、地址、phone、网站、公司} 的对象）。如果您打算渲染一组子项，请改用数组。

const UserList = () => {
 
  const [users, setUsers] = useState([])
  const [selectedUser, setSelectedUser] = useState()
  const [showUser, setShowUser] = useState(true)
  const [search, setNewSearch] = useState("")
  
  const onHandleClick = () => setShowUser(false)
  
  const DisplayUser =(user) => {
    setSelectedUser(user)
    setShowUser(true)
  }
  
  const handleSearchChange = (e) => {
    setNewSearch(e.target.value)
  }

  useEffect(() => {
    fetch(URL)
      .then(res => res.json())
      .then(json => setUsers(json));
  }, [])

  return (
    <>
      <Header>      
        <h1>Contact list</h1>
      </Header>
      <input type="text" value={search} onChange={handleSearchChange}  />
      <Container> 
          <div>
          {!search 
            ?  users.sort((a,b) => a.name.localeCompare(b.name)) 
            :  users.filter(user => user.name.toLowerCase().includes(search.toLowerCase()))
          .map(user => (
            <div key={user.id}>
              <User onClick ={() => DisplayUser(user)}>{user.name}</User>
            </div>
          ))}      
          </div>

第二部分：

 {selectedUser && (
          <>
            {showUser ?
            <UserDetail 
              name={selectedUser.name} 
              username={selectedUser.username}
              email={selectedUser.email}
              address={selectedUser.address.street}
              address2={selectedUser.address.suite}
              city={selectedUser.address.city}
              phone={selectedUser.phone}
              website={selectedUser.website}
              company={selectedUser.company.name}
              onClick={onHandleClick}
            />
            : false}           
          </>
        )}       
      </Container>    
    </>
  )
}

Answer 1

我很难确定，但我认为可能发生的情况如下：

{!search 
            ?  users.sort((a,b) => a.name.localeCompare(b.name)) 
            :  users.filter(user => user.name.toLowerCase().includes(search.toLowerCase()))
          .map(user => (
            <div key={user.id}>
              <User onClick ={() => DisplayUser(user)}>{user.name}</User>
            </div>
          ))}

如果 search 为假，这将 return users.sort((a,b) => a.name.localeCompare(b.name))，这是一个对象，当您打算将 .map 应用于整个三元的结果时手术。现在 .map 仅附加到 users.filter(...) 部分。

我希望“排序或筛选”周围的括号会起作用，从那时起它会 map 在任何一种情况下，而不仅仅是“其他”情况。

{(!search 
            ?  users.sort((a,b) => a.name.localeCompare(b.name)) 
            :  users.filter(user => user.name.toLowerCase().includes(search.toLowerCase())))
          .map(user => (
            <div key={user.id}>
              <User onClick ={() => DisplayUser(user)}>{user.name}</User>
            </div>
          ))}

由于这样的代码很难理解，我强烈建议将这样的逻辑提取到一个函数中，比如 getUser()，这样您就可以改为这样做：

{getUsers().map(user => (
            <div key={user.id}>
              <User onClick ={() => DisplayUser(user)}>{user.name}</User>
            </div>
          ))}

How to handle Error: Objects are not valid as React child?

How to handle Error: Objects are not valid as React child?

arrays

api

error-handling

filter

reactjs

未处理的拒绝（错误）：对象作为 React 子项无效（已找到：具有键 {id、名称、用户名、电子邮件、地址、phone、网站、公司} 的对象）。如果您打算渲染一组子项，请改用数组。