如何處理錯誤：物件作為React子物件無效？

我有一個顯示 name 屬性的物件陣列。我成功地進行了映射，然后按字母順序對名稱串列進行了排序。然后我嘗試通過輸入輸入來添加搜索欄和過濾器/搜索，但遇到了這個錯誤，我不知道如何解決，因為我對嵌套方法和括號有點困惑。（這里是新手！）

有人能發現什么問題嗎？不確定是否需要我的代碼的第二部分，但還是添加了它。對不起，它變得太長了。

Unhandled Rejection (Error): Objects are not valid as a React child (found: object with keys {id, name, username, email, address, phone, website, company})。如果您打算渲染一組子項，請改用陣列。

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>    
    </>
  )
}

uj5u.com熱心網友回復：

我有點難以確定，但我認為可能發生的事情如下：

{!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為 false，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>
          ))}  

標籤：数组 反应 接口 筛选 错误处理

上一篇：試圖用txt資料制作一個串列陣列，Python

下一篇：java中的int陣列不會包含預期值