Question

编辑，已解决：这是因为外部div需要设置键。最父元素必须具有键集。

每个div应该有一个唯一的键，因为我正在使用shortid库来生成一个，这里有点丢失了！！

错误：

backend.js：6警告：列表中的每个孩子都应该有一个唯一的“键”道具。检查JsonFeed的渲染方法。有关更多信息，请参见htt ......- warning-keys。在JsonFeed的div中（由JsonFeed创建）。

渲染功能：

  // Renders to the browser
  public render(): React.ReactElement<IJsonFeedProps> {

    // Grabbing objects to use from state
    const { posts, isLoading} = this.state;
    const { postCount } = this.props;

    return (
      <div className={ styles.jsonFeed }>
        <div className={ styles.container }>
          <p className={ styles.title }>{ escape(this.props.description)}</p>
            <div className={ styles.containerDiv } > 
              {!isLoading ? (
                posts.slice(0, postCount).map(post => {
                  // Variables to use
                  let { id, name, url, imgUrl, endDate, startDate } = post;
                  // Return render of posts
                  return (
                    <div>
                      <div key={shortid.generate()} className={ styles.post }>
                        <Link href={ url } className={ styles.postLink } target="_blank">
                          {imgUrl !== 'undefined' &&
                            <div className={ styles.postImageContainer }><img className={ styles.postImage } src={ imgUrl } /></div>
                          }
                          <div className={ styles.postInfo }>
                            <p className={ styles.postName }>
                                { name.length < 40 ? name : name.substring(0, 40).trim() + '...' }
                            </p>
                            {startDate !== 'undefined' &&
                              <p className={ styles.postDate }><Moment format="DD/MM/YYYY">{ startDate }</Moment> - <Moment format="DD/MM/YYYY">{ endDate }</Moment></p>
                            }
                          </div>
                        </Link>
                      </div>
                    </div>
                  );
                })
                ) : ( <Spinner className={ styles.postSpinner } label={'Loading...'} /> )
              }
              { !isLoading && posts.length == 0 || postCount == null ? <p className={ styles.postSorry }>Sorry, no posts are available.</p> : null }
            </div>
          </div>
        </div>
    );
  }

Answer 1

您需要为要映射到组件的每个帖子分配唯一的键。例如。： <div id={id}>

 // Renders to the browser
  public render(): React.ReactElement<IJsonFeedProps> {

    // Grabbing objects to use from state
    const { posts, isLoading, errors } = this.state;
    const { postCount } = this.props;

    // If their is any errors, return an error message instead
    // if (errors) {
    //   return <p>{errors.message}</p>;
    // }

    return (
      <div className={ styles.jsonFeed }>
        <div className={ styles.container }>
          <p className={ styles.title }>{ escape(this.props.description)}</p>
            <div className={ styles.containerDiv } > 
              {!isLoading ? (
                posts.slice(0, postCount).map(post => {
                  // Variables to use
                  let { id, name, url, imgUrl, endDate, startDate } = post;
                  // Return render of posts
                  return (
                    <div key={id}>
                      <div key={shortid.generate()} className={ styles.post }>
                        <Link href={ url } className={ styles.postLink } target="_blank">
                          {imgUrl !== 'undefined' &&
                            <div className={ styles.postImageContainer }><img className={ styles.postImage } src={ imgUrl } /></div>
                          }
                          <div className={ styles.postInfo }>
                            <p className={ styles.postName }>
                                { name.length < 40 ? name : name.substring(0, 40).trim() + '...' }
                            </p>
                            {startDate !== 'undefined' &&
                              <p className={ styles.postDate }><Moment format="DD/MM/YYYY">{ startDate }</Moment> - <Moment format="DD/MM/YYYY">{ endDate }</Moment></p>
                            }
                          </div>
                        </Link>
                      </div>
                    </div>
                  );
                })
                ) : ( <Spinner className={ styles.postSpinner } label={'Loading...'} /> )
              }
              { !isLoading && posts.length == 0 || postCount == null ? <p className={ styles.postSorry }>Sorry, no posts are available.</p> : null }
            </div>
          </div>
        </div>
    );
  }

列表中的每个孩子都应该有一个唯一的键-反应错误

1 个答案: