Hola, tengo algunos problemas para escribir enlaces para un pequeño componente de React. Tengo un tipo de unión típico con casos que representan accesorios para el componente. Uno de esos casos parece Tabs of ITab list
. Cuando trato de convertir una lista de estos accesorios en un objeto con keyValueList
, funciona bien, hasta que agrego el accesorio Tabs
, donde JavaScript arrojará un error que dice Cannot infer key and value of [object Object]
.
open Fable.Core
open Fable.Core.JsInterop
type ITab =
{ Name: string
Selected: bool }
type Props =
| Tabs of ITab list
| Title of string
let tab = { Name = "Hello"; Selected = true }
let works = keyValueList CaseRules.LowerFirst [Title "My Title"]
let doesNotWork = keyValueList CaseRules.None [Tabs [tab]; Title "My Title"]
Espero que el doesNotWork
no arroje un error y genere un objeto que se parece a:
var doesNotWork = {
title: "My Title",
tabs: [
{
name: "Hello",
selected: true
}
]
}
dotnet fable --version
): 1.3.0Puede solucionar su problema utilizando una matriz:
open Fable.Core
open Fable.Core.JsInterop
type ITab =
{ Name: string
Selected: bool }
type Props =
| Tabs of ITab array
| Title of string
let tab = { Name = "Hello"; Selected = true }
let works = keyValueList CaseRules.LowerFirst [Title "My Title"]
let doesNotWork = keyValueList CaseRules.None [Tabs [| tab |]; Title "My Title"]
El problema ocurre porque Json/JObject no usa el tipo de lista que es un objeto en tiempo de ejecución. Json/Jobject solo conocen matrices.
¡Gracias! No estaba al tanto de esa limitación, todo funciona ahora después de cambiar a la matriz.
Sí, en realidad, si usa una lista keyValueList
interpretará que es una keyValueList anidada, como en el caso de Style
:
div [ClassName "foo"
Style [BackgroundColor "red"
Width "500px"]] []
Comentario más útil
Puede solucionar su problema utilizando una matriz:
El problema ocurre porque Json/JObject no usa el tipo de lista que es un objeto en tiempo de ejecución. Json/Jobject solo conocen matrices.