"Warning: Each child in an array or iterator should have a unique «key» prop." Как исправить?

Question

[paketik0chaya]

Ошибка: Warning: Each child in an array or iterator should have a unique "key" prop.
Не могу понять, как исправить.
Только начала изучать React и axios.

import React, {Component, PropTypes} from 'react';
import {Link} from 'react-router';
import axios from 'axios';

class Admin extends Component {

constructor() {
    super();
    this.fetchDistricts = this.fetchDistricts.bind(this);
    this.fetchTag = this.fetchTag.bind(this);
    this.fetchField = this.fetchField.bind(this);

    this.state = {
        districtList: [],
        tagList: [],
        fieldList: [],
    }
}

    componentDidMount() {
        this.fetchDistricts();
        this.fetchTag();
        this.fetchField();
    }

    fetchDistricts()
    {
        axios('http://46.236.137.153/district', {
            responseType: 'json'
        })
        .then(function (response) {
            console.log(response);
            return(data => this.setState({districtList: data}))
        })
        .catch(function (error) {
            console.log(error);
        })
    }

 renderDistrict(item, key) {
     return (
        <tr key ={key} className="districts">
            <td>{item.id}</td>
            <td>{item.name}</td>
        </tr>
     )
}

 render(){
        const {districtList, tagList, fieldList} = this.state;

        const districts = districtList.map(item => this.renderDistrict(item));

        return (

            <form className="form-admin">

                <div className="col-md-8">

                    <ul className="nav nav-tabs">
                        <li><a href="#tab2"  data-toggle="tab">Районы</a></li>
                        <div className="admin_operation">
                            <Link name="add_field"  to='articles' className="admin_add">Добавить</Link>
                        </div>
                    </ul>

                    <div className="tab-content">

                        <div className="tab-pane" id="tab2">
                            <table id="district" className="table_district">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Район</th>
                                    </tr>
                                </thead>
                                <tbody>
                                   { districts }
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </form>
        );
    }
}

export default Admin;

Answer 1

[Максим]

Ошибка в том, что вы не передаете key, но пытаетесь его установить в
renderDistrict(item, key)
У вас функция принимает 2 аргумента, а вы передаете только один здесь:
this.renderDistrict(item)

Тем не менее, так как у вас есть id ваша задача решается так:

renderDistrict(item) {
     return (
        <tr key ={item.id} className="districts">
            <td>{item.id}</td>
            <td>{item.name}</td>
        </tr>
     )
}

p.s. для продуктивного изучения react советую подтянуть знания javascript'a

Comments

[paketik0chaya]

Максим, спасибо! Работает, как нужно.)

[Максим]

paketik0chaya: зачем реакт ожидает свойство key? Что было в key в вашем случае, до моего ответа?