Disculpe mi ignorancia ya que soy nuevo en React router v6 y Typescript. Estoy tratando de pasar un estado y una función que cambiará el estado del flujo de datos de mi aplicación.
const [playerSystem, setPlayerSystem] = useState<String>("Cheese") <UImaster /> <Routes> <Route path="/sectora" element={<SectorView {...playerSystem} /> } /> </Routes> Sin embargo, cuando hago esto, si pongo playerSystem y setPlayerSystem en los accesorios para el elemento, arroja un error. Y en este momento, mi componente SectorView arroja este error increíblemente poco claro.
Escriba '{ toString(): cadena; charAt(pos: número): cadena; charCodeAt(índice: número): número; concat(...cadenas: cadena[]): cadena; indexOf(searchString: cadena, posición?: número | indefinido): número; ... 44 más ...; Símbolo.iterador: IterableIterator<...>; }' no tiene propiedades en común con el tipo 'IntrinsicAttributes'.
playerSystem es una cadena, por lo que no puede pasarla como accesorio al difundirla. El mensaje de error enumera todas las propiedades en una cadena y se queja de que no coinciden con IntrinsicAttributes , que es una forma confusa de referirse al conjunto de cosas que puede pasar como accesorios a un elemento HTML.
Así es como pasarías esos valores como accesorios:
<SectorView playerSystem={playerSystem} setPlayerSystem={setPlayerSystem} />La difusión en general funciona en cadenas, pero en el caso de los accesorios, creo que solo los objetos funcionarán porque los accesorios son un conjunto de claves y valores. Entonces, por ejemplo, esto es equivalente a lo anterior:
const [playerSystem, setPlayerSystem] = useState<String>("Cheese") const props = { playerSystem, setPlayerSystem } <SectorView {...props} /> Tenga en cuenta que { playerSystem, setPlayerSystem } es la abreviatura de { playerSystem: playerSystem, setPlayerSystem: setPlayerSystem } .
Supongo que la razón por la que no funciona en absoluto cuando intentas incluir setPlayerSystem es que estás haciendo {...setPlayerSystem} y nunca puedes difundir una función. Con playerSystem te permite hacer la propagación porque eso está permitido en las cadenas, pero luego SectorView no tiene idea de qué hacer con él, por lo que el error proviene de allí.
Estos son ejemplos de cómo funciona la distribución (independiente de JSX) con objetos, cadenas y matrices.
const obj1 = { a: 1 } const obj2 = { b: 2 } console.log({ ...obj1, ...obj2 }) // { a: 1, b: 2 } const arr1 = [1, 2, 3] const arr2 = [4, 5, 6] console.log([...arr1, ...arr2]) // [1, 2, 3, 4, 5, 6] const str1 = "ab" const str2 = "cd" console.log([ ...str1, ...str2]) // ["a", "b", "c", "d"]¿Está definido el tipo Props en el <SectorView /> ?