Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Lists passed through FunctionComponent.Of() upsets _createForOfIteratorHelper

Aperta
  • Qualcosa non va?
#203 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
fsharp, react
Ambito
frontend

Direzione di ricerca

Inizia con la riproduzione fornita di AutoComplete.fs e confronta il percorso di autocompletamento diretto con FunctionComponent.Of. Traccia la chiamata generata attraverso Util.ts createObj e Util.js _createForOfIteratorHelper, concentrandoti sul valore di props passato a keyValueList. Il lavoro è completato quando l’esempio autocompleteF non genera più il TypeError non iterabile e conserva i props elencati.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

I'm trying to integrate with reactjs-autocomplete.

If I use the direct integration (autocomplete in module AutoComplete below), it kind of works. The things that don't seem to work so well may work better when it's mounted as a FunctionComponent (using autocompleteF in the same module).

However, the props list now throws a runtime TypeError at the call to keyValueList, and I can't see why. You can still take the head/tail, and the same call to keyValueList works just fine when called from the plainer autocomplete.

Uncaught TypeError: Invalid attempt to iterate non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    _createForOfIteratorHelper Util.js:140
    createObj Util.ts:520
    autocompleteF AutoComplete.fs:20

module AutoComplete

open Fable.React
open Fable.Core.JsInterop
open Fable.Core
open Browser

type AutoCompleteProps<'T,'V> = 
  | Items of 'T array
  | RenderItem of ('T -> ReactElement)
  | Value of 'V
  | GetItemValue of ('T -> 'V)
  | OnChange of (Browser.Types.Event -> string -> unit)
 
let inline autocomplete (props : AutoCompleteProps<'T,'V> list) : ReactElement =
    let propsObj = (keyValueList CaseRules.LowerFirst props)
    ofImport "default" "react-autocomplete" propsObj []

let autocompleteF<'T,'V>  =
    FunctionComponent.Of(fun (props : AutoCompleteProps<'T,'V> list) -> 
        let propsObj = (keyValueList CaseRules.LowerFirst props)
        div [] [ 
            ofImport "default" "react-autocomplete" propsObj []
            str "autocomplete" 
        ]
    )

This is how the call to autocompleteF is defined

              div [] [
                AutoComplete.autocompleteF [
                  Items [| { Label = "HelloX" }; { Label = "WorldX" } |]
                  Value "HelloX"
                  RenderItem (fun item -> div [] [ str item.Label ])
                  GetItemValue (fun item -> item.Label)
                  //OnChange (fun e v -> Select v |> dispatch)
                ]
              ]
Lingua principale
F#
Stelle
276
Fork
65
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di fable-compiler/fable-react

Tutte le issue di fable-compiler/fable-react

Issue simili

Altre issue su Web Dev

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.