Reactjs 反应选择意外标记，应为“&引用；(56:53)

我有一个useState，我正在从MongoDB调出我的角色：

const [role, setRole] = useState('')

在编辑屏幕上，我尝试只选择与当前选定角色相等的角色，因此我创建了一条条件语句：

<div className="form-group"> 
                <label for="phone">User Role</label>
                  <select class="form-control" onChange={(e) => setRole(e.target.value)}>
                     <option value="administrator" { role === 'administrator' ? selected : ''} >Administrator</option>
                     <option value="editor" { role === 'editor' ? selected : ''}>Editor</option>
                     <option value="subscriber"{ role === 'reviewer' ? selected : ''}>Subscriber</option>
                  </select>
            </div>

用户角色
setRole（e.target.value）}>
管理员
编辑
用户

但这会返回一个错误：

./src/screens/UserEditScreen.js
SyntaxError: C:\Users\Grole\Desktop\Creen\Play\react\src\screens\UserEditScreen.js: Unexpected token, expected "..." (56:53)

  54 |                 <label for="phone">User Role</label>
  55 |                   <select class="form-control" onChange={(e) => setRole(e.target.value)}>
> 56 |                      <option value="administrator" { role === 'administrator' ? selected : ''} >Administrator</option>
     |                                                      ^
  57 |                      <option value="editor" { role === 'editor' ? selected : ''}>Editor</option>
  58 |                      <option value="subscriber"{ role === 'subscriber' ? selected : ''}>Subscriber</option>
  59 |                   </select>

/src/screens/UserEditScreen.js
语法错误：C:\Users\Grole\Desktop\Screen\Play\react\src\screens\UserEditScreen.js:意外标记，应为“…”（56:53）
54 |用户角色
55 | setRole（e.target.value）}>
>56 |管理员
|                                                      ^
57 |编辑
58 |订户
59 |                   

不知道为什么要用三个圆点来解决这个问题，下面是我的完整代码：

import React, { useState, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import  Message from '../components/Message'
import  Loader from '../components/Loader'
import { getUserDetails } from '../actions/userActions'

const UserEditScreen = ({ match, history }) => {

    const userId = match.params.id

    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [phone, setPhone] = useState('')
    const [role, setRole] = useState('')

    const dispatch = useDispatch()

    const userDetails = useSelector(state => state.userDetails)
    const { loading, error, user } = userDetails 

     useEffect(() => {
       if(!user.name || user._id !== userId){
          dispatch(getUserDetails(userId))
       } else {
           setName(user.name)
           setName(user.email)
           setName(user.phone)
           setName(user.role)
       }
     }, [dispatch, userId, user])

    const submitHandler = (e) => {
        e.preventDefault()
    }

    return ( 
        <>
            <h1>Edit User</h1>
    { loading ? <Loader /> : error ? <Message variant='danger'>{error}</Message> : (
            <form onSubmit={submitHandler}> 
            <div className="form-group"> 
                <label for="name">Name</label>
                <input type="text" name="name" value={name} className="form-control" id="name" onChange={(e) => setName(e.target.value)}  />
            </div>
            <div className="form-group"> 
                <label for="email">Email address</label>
                <input type="email" name="email"  value={email} className="form-control" id="email" onChange={(e) => setEmail(e.target.value)}  />
            </div>
            <div className="form-group"> 
                <label for="phone">Phone</label>
                <input type="text" pattern="[0-9]{9}"  value={phone} className="form-control" id="phone" onChange={(e) => setPhone(e.target.value)}  />
            </div>
            <div className="form-group"> 
                <label for="phone">User Role</label>
                  <select class="form-control" onChange={(e) => setRole(e.target.value)}>
                     <option value="administrator" { role === 'administrator' ? selected : ''} >Administrator</option>
                     <option value="editor" { role === 'editor' ? selected : ''}>Editor</option>
                     <option value="subscriber"{ role === 'subscriber' ? selected : ''}>Subscriber</option>
                  </select>
            </div>
            <button type="submit" className="btn btn-primary">Update</button>
            </form>
            
    )}

        </>
    )
}

export default UserEditScreen

import React，{useState，useffect}来自“React”
从“react redux”导入{useDispatch，useSelector}
从“../components/Message”导入消息
从“../components/Loader”导入加载程序
从“../actions/userActions”导入{getUserDetails}
const UserEditScreen=（{match，history}）=>{
const userId=match.params.id
const[name，setName]=useState（“”）
const[email，setEmail]=useState（“”）
const[phone，setPhone]=使用状态（“”）
const[role，setRole]=useState（“”）
const dispatch=usedpatch（）
const userDetails=useSelector（state=>state.userDetails）
const{loading，error，user}=userDetails
useffect（（）=>{
如果（！user.name | | user._id！==userId）{
调度（getUserDetails（userId））
}否则{
setName（user.name）
setName（user.email）
setName（user.phone）
setName（user.role）
}
}，[dispatch，userId，user]）
常量submitHandler=（e）=>{
e、 预防默认值（）
}
报税表（
编辑用户
{正在加载？：错误？{error}：(
名称
setName（e.target.value）}/>
电子邮件地址
setEmail（e.target.value）}/>
电话
设置电话（e.target.value）}/>
用户角色
setRole（e.target.value）}>
管理员
编辑
用户
更新
)}
)
}
导出默认UserEditScreen

---

如何修复此问题并选择当前角色？

您需要将条件包装到classname中

用户角色
setRole（e.target.value）}>
管理员
编辑
用户

试试这个

<option value="administrator" selected={role === 'administrator'} >Administrator</option>
<option value="editor" selected={role === 'editor'}>Editor</option>
<option value="subscriber" selected={role === 'reviewer'}>Subscriber</option>

管理员
编辑
用户

试试这个怎么样

管理员
编辑
用户

顺便说一句，下面是你想要的

对我来说，对每个值多次使用

setName

似乎有些奇怪

useffect（（）=>{
如果（！user.name | | user._id！==userId）{
调度（getUserDetails（userId））
}否则{
setName（user.name）
setName（user.email）
setName（user.phone）
setName（user.role）
}
}，[dispatch，userId，user]）