输入'boolean‘不能指定键入'IntrinsicAttributes & boolean’

Question

我遇到了一个问题，我的反应应用，我试图创造私人路线。但是，当I试图传递用户的状态(验证或未验证//true或false)时，我得到以下错误：

Type '{ IsAuthenticated: boolean; }' is not assignable to type 'IntrinsicAttributes & boolean'.ts(2322)

这是我的密码：

export default function App ():ReactElement {
  const params = useParams()
  const [IsAuthenticated, setAuthenticated] = useState(Boolean)
  axios.get(`${process.env.API_URL || 'http:///localhost'}:${process.env.API_PORT || 8000}/api/session`)
    .then(res => {
      console.log(res.data.IsAuthenticated)
      if (res.data.IsAuthenticated) return setAuthenticated(false)
      else return setAuthenticated(false)
    })
  return (
      <Router>
          <Routes>
            <Route path='/' element={<Home/>}/>
            <Route path='/' element={<ProtectedRoute IsAuthenticated={IsAuthenticated}/>}>
            <Route path="dashboard" element={<Main/>}/>
            <Route path='user/:userId' element={<Userdetail userId={params}/>}/>
            </Route>
            <Route
            path="*"
            element={<Navigate to="/" replace />}
            />
          </Routes>
      </Router>
  )
}```

Answer 1

我遇到了这个错误消息，这是因为我输入了错误的组件道具。以下是我所拥有的一个简化版本：

// ParentComponent.tsx

const [selected, setSelected] = useState<readonly string[]>([]);

return <ChildComponent selected={selected} />;

// ChildComponent.tsx (❌ incorrect)

                     // ▼ this is all props, so needs destructuring
const ChildComponent = (selected: boolean): ReactElement => (
  // my component
);

export default ChildComponent;

我的错误在于没有破坏从反应中传递出来的道具，这解决了它：

// ChildComponent.tsx (✅ correct)

                     // ▼ destructured props correctly
const ChildComponent = ({selected}: {selected: boolean}): ReactElement => (
  // my component
);

export default ChildComponent;