1
votes

Problème avec les clés ReactJS

J'ai du JSX qui me donne l'erreur: Attention: chaque enfant d'une liste doit avoir un accessoire "clé" unique que j'ai déjà rencontré, mais cette fois, je ne vois pas où est le problème. Le balisage est le suivant:

    return isLoading ? (
      <div className="App">
        <div className="spinner"></div>
        <div className="App loading">
          <p><i>loading...</i></p>
        </div>
      </div>
    )
    : hasError ? (
      <div className="App loading-error">
        &#x26A0; There is a network issue: Please try again later
      </div>
    )
    :
    (
      <div className="App" key={`op - ${Math.floor(Math.random() * 110)}`}>

        <>
        {shelves.map(s => {
          return (
           books[s].map((b,i) => {
            return (
                <>
                <h2>{((shelvesN.filter(o => o.value === s)))[0].label}</h2>
                <div key={`${s}-${i}`}>
                    <Link to={`/book/${b.id}`}>
                    <img src={b.imageLinks.thumbnail} alt={b.title}></img>
                    </Link>
                    <Select className="sel-x"
                            placeholder="Choose a bookshelf..."
                            value={""}
                            options={shelvesN}
                            onChange={opt => changeShelf(opt.value,b.id)}
                    />
                </div>
                </>
            )
          })
          )
        })}
        </>
      </div>
    )

J'apprécierais toute aide. Merci.

reactjs

0 commentaires

3 Réponses :

0
votes

Vous utilisez l'itération, ce qui signifie que vous devez utiliser des clés . topic

Votre code semble horrible et illisible, vous devriez mieux travailler sur le style.

shelves.map((s, I) => {
      return (
       <div key={I}>
       {books[s].map((b,i) => {
        return (
            <div key={`${I}-${i}`}>
            <h2>{((shelvesN.filter(o => o.value === s)))[0].label}</h2>
            <div >
                <Link to={`/book/${b.id}`}>
                <img src={b.imageLinks.thumbnail} alt={b.title}></img>
                </Link>
                <Select className="sel-x"
                        placeholder="Choose a bookshelf..."
                        value={""}
                        options={shelvesN}
                        onChange={opt => changeShelf(opt.value,b.id)}
                />
            </div>
            </div>
            </>
        )
      })}
      </div>)
    }

0 commentaires

1
votes

Donc, comme je le vois, vous êtes coincé ici:

shelves.map((s, I) => {
      return (
       <div key={I}>
       {books[s].map((b,i) => {
        return (
            <div key={`${I}-${i}`}>
            <h2>{((shelvesN.filter(o => o.value === s)))[0].label}</h2>
            <div >
                <Link to={`/book/${b.id}`}>
                <img src={b.imageLinks.thumbnail} alt={b.title}></img>
                </Link>
                <Select className="sel-x"
                        placeholder="Choose a bookshelf..."
                        value={""}
                        options={shelvesN}
                        onChange={opt => changeShelf(opt.value,b.id)}
                />
            </div>
            </div>
            </>
        )
      })}
      </div>)
    }

ce bloc contient 2 cartes, qui renvoie des listes. celui de l'intérieur ne doit pas utiliser , car il a besoin de la référence clé, de même que le premier. quelque chose comme:

      <div className="App" key={`op - ${Math.floor(Math.random() * 110)}`}>
        <>
        {shelves.map(s => {
          return (
           books[s].map((b,i) => {
            return (
                <>
                <h2>{((shelvesN.filter(o => o.value === s)))[0].label}</h2>
                <div key={`${s}-${i}`}>
                    <Link to={`/book/${b.id}`}>
                    <img src={b.imageLinks.thumbnail} alt={b.title}></img>
                    </Link>
                    <Select className="sel-x"
                            placeholder="Choose a bookshelf..."
                            value={""}
                            options={shelvesN}
                            onChange={opt => changeShelf(opt.value,b.id)}
                    />
                </div>
                </>
            )
          })
          )
        })

1 commentaires

Merci beaucoup! J'ai quand même fini par jouer à l'analyseur pour le faire mais c'était beaucoup plus facile avec une deuxième paire d'yeux, et bienvenue dans SO !!

0
votes

Vous retournez React.Fragment de chaque élément du tableau, alors attribuez la clé unique à chaque fragment, ici:

<div className="App" key={`op - ${Math.floor(Math.random() * 110)}`}>
    <>
        {shelves.map(s => {
            return (
                books[s].map((b,i) => {
                    return (

                        // â†“â†“â†“â†“â†“â†“â†“â†“ add key here
                        <React.Fragment key={i}>

                            <h2>{((shelvesN.filter(o => o.value === s)))[0].label}</h2>
                            <div>
                                <Link to={`/book/${b.id}`}>
                                    <img src={b.imageLinks.thumbnail} alt={b.title}></img>
                                </Link>
                                <Select className="sel-x"
                                    placeholder="Choose a bookshelf..."
                                    value={""}
                                    options={shelvesN}
                                    onChange={opt => changeShelf(opt.value,b.id)}
                                />
                            </div>
                        </React.Fragment>
                    )
                })
            )
        })}
    </>
</div>

Utilisez ce code: p >

books[s].map((b,i) => { return ( <> ..... </> )})

0 commentaires