在了解足够react基础知识之前，我们还有一件事要做，以便能开发真正的项目。这就是遍历数组来渲染数据。现在我们有一个人和他的国籍，不过如果我们要渲染十个人和他的国籍，有什么优雅的方法么？肯定是有的。
幸运的是，在JSX中调用map函数很容易做到这些。你可以简单的遍历整个数组去做进一步的处理，在我们的例子中，返回一个JSX的新数组用来渲染。
首先修改constructor方法生成一个以供循环的数组:
src/pages/Detail.js
constructor(props) {
super(props);
const people = [];
for (let i = 0; i < 10; i++) {
people.push({
name: chance.first(),
country: chance.country({ full: true })
});
}
this.state = { people };
}
注意我在使用简化的语法在this.state中设置people的值。如果key的名称和值的名称相同，你可以只写一次。
现在state中有一个我们将处理的数组，下面修改render方法用map函数去遍历它:
src/pages/Detail.js
render() {
return (<div>
{this.state.people.map((person, index) => (
<p>Hello, {person.name} from {person.country}!</p>
))}
</div>);
}
托map()的福我们写了很多的大括号,下面是这段代码的作用:
- 对于数组中每个元素，分别用person来表示元素和index来表示位置。
- 创建一个新的匿名函数，这个箭头函数接受两个值返回一个处理过的数据。
如果你保存文件并查看你的浏览器，你可能会看到10个数据，就像是一切都好好运行那样。不过打开控制台会看到一个警告: Each child in an array or iterator should have a unique “key” prop.每一个数组或迭代器中的子元素需要一个唯一的‘key‘。
这个错误显示的很清楚，但我为了保证你知道为什么会出错所以解释一下:如果你遍历生成一些子元素，你需要给每个子元素一个key属性来唯一的表示他们。这是为了在他们被变更的时候让react知道是哪个确定的元素，称为一致性比较。这在你开发更复杂的app的时候很重要，如果不完全理解，可能会产生很多奇怪的bug。
如果通过循环创建的元素没有唯一的key值就会报错
考虑下面的输出:
<div>
<p>Hello, Jim from Australia!</p>
<p>Hello, Dave from Malaysia!</p>
<p>Hello, Charlotte from Thailand!</p>
</div>
这里有三个p元素在div元素里，很简单的组件。现在如果我们将组件更改，渲染出下列内容:
<div>
<p>Hello, Jim from Australia!</p>
<p>Hello, Charlotte from Thailand!</p>
</div>
发生什么了？都能看出来Dave from Malaysia!这行被因为某种理由删除了。不过react不知道。它只知道从三个p标签变成两个，所以对react而言，你是删掉了最后一个p并改变了第二个p标签，还是删掉了第二个p标签.
React要求每个子元素有一个key，以便它知道哪个元素是哪个，如果我们重写一下，它看起来像是这样:
<div>
<p key="1">Hello, Jim from Australia!</p>
<p key="2">Hello, Dave from Malaysia!</p>
<p key="3">Hello, Charlotte from Thailand!</p>
</div>
因此，当我们删除Dave，React可以看到1和3留下来之后进行更新。
回到我们Detail组件随机人名国籍的地方，为每个子元素提供唯一的key:
render() {
return (<div>
{this.state.people.map((person, index) => (
<p key={index}>Hello, {person.name} from {person.country}!</p>
))}
</div>);
}
现在就能正常工作了，如果你需要添加，删除或者移动一个元素，你需要一个当元素移动或变化时不变的key属性。相信我，我经历过。如果你使用一个元素的index作为他的key，当移动元素时，你会得到一些非常奇怪的错误。
网友评论