Question

我收到错误：

警告：数组或迭代器中的每个子节点都应该有一个唯一的＆＃34;键＆＃34;支柱。有人可以帮助我，我必须把钥匙放在哪里

导航组件代码：

var React = require('React');
var $ = require('jquery');

var Menubar = React.createClass({
    getInitialState: function() {
        return {
            items: []
        }
    },
    componentWillMount: function() {
        var _this = this;
        this.serverRequest =
        $.post("/nav", {}, function(result) {
           _this.setState({
                items: result.data
            });
        })
   },
    render: function() {
        var item = this.state.items.map(function(data) {
            var ico = "fa fa-" + data.ico;
            return (
               <div id={data.sname} className="nav_item">
                    <div className="nav_icon">
                          <a href={data.url}>
                               <i className = {ico}>
                               </i>
                          </a>
                    </div>
               </div>   
        );
    });
    return (
        <div>{item}</div>
    )
  }
})
module.exports = Menubar;

Answer 1

无论何时使用返回JSX的map函数，每个返回的元素都应该有一个key属性，以便最佳地呈现。您可以在此处阅读更多内容：https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

你需要在这一行中粘贴一个键属性，通常我会使用地图索引，但如果每个元素都有自己唯一的id，你可以使用它来代替

<div id={data.sname} className="nav_item" key={index}>

这是更正后的代码。（请注意，需要删除注释，因为您不能在实际的JSX中使用类似的注释）

        var item = this.state.items.map(function(data, index) {
            var ico = "fa fa-" + data.ico;
            return (
                // ** this element needs a key property **
               <div id={data.sname} className="nav_item" key={index}>
                    <div className="nav_icon">
                          <a href={data.url}>
                               <i className = {ico}>
                               </i>
                          </a>
                    </div>
               </div>   
        );

希望这有帮助。

Answer 2

您应该知道React使用虚拟DOM来查看是否有任何更改要刷新到浏览器。要做到这一点，它需要确切地知道它是哪个元素，以便它可以在下次DOM因状态/螺栓更改而发生变化时进行比较。这种方式react会为每个DOM元素分配id，并比较DOM的变化。

显示此警告的原因是，当有一组动态生成的DOM元素（在您的情况下通过循环）时，您需要以某种方式告知反应，以便它能够在重新生成时将其识别回来 - 渲染你的DOM。

因此table元素上的extra line属性是必需的。默认情况下使用数组的current content editable，但我建议你不要使用它（read here）。我建议你在你的情况下使用key因为我发现它是唯一的，因为你将它分配给root。

您的更改将与此类似

index

Answer 3

您应该为元素指定唯一键。 React正在检查密钥以识别和比较您的元素，以确定在树中触发状态更改时是否需要重新呈现它。

将项目的索引用作关键字不是最佳做法，因为如果修改了列表，那么您的节点将不再与列表中的正确元素匹配，并可能产生意外结果。

如果要迭代对象，一个好的做法是使用属性值作为键，例如映射用户并使用use Symfony\Component\Validator\Constraints\Email; public function buildForm(FormBuilderInterface $builder, array $options) { $builder ->add('email', 'email', array( 'mapped' => false, 'constraints' => array( new Email(array('checkMX' => true)), ), )) ->add('save', 'submit'); }作为您的唯一密钥。

Answer 4

您应该为每个孩子以及孩子内部的每个元素添加key。

这样React可以处理最小的DOM更改。

render: function() {
    var item = this.state.items.map(function(data, index) {
        var ico = "fa fa-" + data.ico;
        return (
           <div key={index} id={data.sname} className="nav_item">
                <div className="nav_icon">
                      <a href={data.url}>
                           <i className = {ico}>
                           </i>
                      </a>
                </div>
           </div>   
    );
});
return (
    <div>{item}</div>
)
}

数组或迭代器中的每个子节点都应该有一个唯一的＆＃34;键＆＃34;支柱。

4 个答案: