reactjs - Type 'boolean' kan ikke tildeles typen 'IntrinsicAttributes & boolean'

Jeg har støtt på et problem med React-appen min, jeg prøver å lage private ruter. Men når jeg prøver å sende brukerens status (autentisert eller ikke //true eller false), får jeg følgende feil:

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

Her er koden min:

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

Svar #1

Jeg støtte på denne feilmeldingen, og det var på grunn av at jeg tolket komponentens props feil. Her er en forenklet versjon av det jeg hadde:

// 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;

Min feil var at jeg ikke destrukturerte propsene som ble sendt fra React, dette løste det:

// ChildComponent.tsx (✅ correct)

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

export default ChildComponent;

Relaterte artikler