时间戳

首页 > 解决方案 > 如何处理错误：对象作为 React 子对象无效？

arrays - 如何处理错误：对象作为 React 子对象无效？

问题描述

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

有人可以发现问题所在吗？不确定是否需要我的代码的第二部分，但还是添加了它。对不起，它变得太长了。

未处理的拒绝（错误）：对象作为 React 子项无效（发现：对象的键为 {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>    
    </>
  )
}

标签： arraysreactjsapifiltererror-handling

解决方案

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

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

推荐阅读