选择无法读取未定义的属性名称和渲染值

Question

我的 MongoDB 数据库中有一个用户对象和一个实习对象。受训对象具有引用用户对象的“作者”字段。

例如，如果我想在我的实习对象上显示作者的姓名，我会这样做：

trainee.author.name

我的问题是我无法在下拉菜单中显示用户的姓名，因为它们只是没有出现在菜单项中。另外，我收到了源于此的错误：

<Select id="grouped-select" value={trainee.author.name || ''} renderValue={ () => renderValue(trainee.author.name)}>

错误源于 trainee.author.name，默认情况下，该名称始终为空，直到我通过从下拉列表中选择一个用户来分配用户。

TypeError: Cannot read property 'name' of undefined

我在这里做错了什么？在我看来并没有错。

下面我将发布我的完整代码，并简要说明事情的作用。

我正在从我的 API 接收用户列表，我正在用他们更新状态：

const [users, setUsers] = useState([

  ])  

useEffect(() => {
  fetch('api/admin/users')
  .then(response => response.json())
  .then(json => setUsers(json))

}, [])

我正在为我的学员定义状态。

const [trainee, setTrainee] = useState (
      {status: "Active"}
)

当用户下拉列表中的值被点击时的处理函数。如果我单击下拉列表中的特定用户，则整个用户对象将放置在 trainee.author 中

const renderValue = (value) => {
  return value;
}
const handleClick = (user) => {
    setTrainee({...trainee, 
      author: user});
}

渲染用户数组和选择组件及其所有功能。

<Select id="grouped-select" value={trainee.author.name || ''} renderValue={ () => renderValue(trainee.author.name)}>
  <span>
    {users && users.length > 1 && users.map((user) => (
      <MenuItem key={user._id} onClick={()=>handleClick(user)} value={user.name}>
        {user.name}
      </MenuItem>
    ))}
  </span>
        </Select>

Answer 1

当您的组件呈现时，尚未收到数据。因此，在您的实习生状态下没有作者。你可以通过先检查来避免它

{tranee.author && 
<Select id="grouped-select" value={trainee.author.name || ''} renderValue={ () => renderValue(trainee.author.name)}>
  <span>
    {users && users.length > 1 && users.map((user) => (
      <MenuItem key={user._id} onClick={()=>handleClick(user)} value={user.name}>
        {user.name}
      </MenuItem>
    ))}
  </span>
  </Select>}

另外一点，如果你的下一个状态依赖于旧状态，请使用函数

const handleClick = (user) => {
    setTrainee(prevState => {...prevState, 
      author: user});
}