开发者问题收集

ReactJS 密钥问题

2019-04-24
45

我有一些 JSX 给我错误: 警告:列表中的每个子项都应具有唯一的“key”属性 我以前遇到过这种情况,但这次我看不出问题出在哪里。标记如下:

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

我很感激任何帮助。谢谢。

好的。

3个回答

所以,在我看来,你被困在这里:

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

这个块包含 2 个映射,返回列表。 内部的映射不应使用 <>,因为它需要键引用,第一个映射也应如此。类似于:

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>)
    }
Victor Hugo Santos Barrozo
2019-04-24

您将从每个数组项返回 React.Fragment ,因此为每个 Fragment 分配唯一键,如下所示:

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

使用此代码:

<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>
Mayank Shukla
2019-04-24

您使用迭代,这意味着您必须使用 keys 主题

您的代码看起来很糟糕,难以阅读,您应该在风格上做得更好。

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>)
    }
Michael George
2019-04-24