Question

所以我正在学习React。我在Django项目中使用React。我的第一个目标是列出Django博客API公开的博客标题。它首先获取数据，render方法使用map函数列出Blog标题。如下所示，我有一个使用每个博客的主键（pk）值的唯一键。这个数字本身就是Django模型所确定的。

./组件/ BlogShow.js

import React from 'react'

class BlogShow extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       error: null,
       isLoaded: false,
        blogs:null
    };
  }

  componentDidMount() {
    fetch("http://127.0.0.1:8000/blogs/")
      .then(res => {
          if (!res.ok) {
            throw Error(res.statusText);
        }
        else{
              return res.json()
          }
      })
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            blogs: result
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    const { error, isLoaded, blogs } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
            <div>
                {blogs.map((blog,index) => {
                    return <p><a href="#" key={blog.pk}>{blog.title}</a></p>
                })}
            </div>

      );
    }
  }
}

export default BlogShow

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import BlogShow from './components/BlogShow'

ReactDOM.render(<BlogShow/>, document.getElementById('react'));

问题是我一直收到有关唯一密钥的警告。

警告：数组或迭代器中的每个子节点都应该有一个唯一的＆＃34;键＆＃34;   丙

检查BlogShow的渲染方法。       在p（由BlogShow创建）       在BlogShow中

即使渲染的实际React组件看起来像

<BlogShow>
    <div>
        <p>
            <a key="1" href="#">Test1</a>
        </p>
        <p>
            <a key="2" href="#">Test2</a>
        </p>
        <p>
            <a key="3" href="#">Test3</a>
        </p>
         <p>
            <a key="4" href="#">Test4</a>
        </p>
    </div>
</BlogShow>

我知道还有其他关于唯一键的问题。我已经阅读了他们并尝试了各种各样的事情但没有任何东西阻止了这个警有什么想法吗？

Answer 1

在地图中，您需要在包装器上使用unique key，而不是children。请查看以下代码段

 {blogs.map((blog,index) => {
       return <p key={blog.pk}><a href="#" >{blog.title}</a></p>
 })}

建立唯一性后显示反应唯一键警告

1 个答案: