Почему я получаю ошибку ключа консоли после сопоставления массива в React? - PullRequest
Новая
       3

Почему я получаю ошибку ключа консоли после сопоставления массива в React?

0 голосов
/ 24 февраля 2020

Я разрабатываю приложение реагирования, в котором у меня есть массив объектов. Я отображаю объекты в React следующим образом: 

<ListGroup id="building_list">
              {this.state.buildings.map(item => {
                return (
                  <ListGroupItem className="booking_list_group " key={item.id}>
                    <Container
                      className="booking_building my-auto "
                      fluid={true}
                    >
                      <Row>
                        <Col xs={4} className="text-center my-auto">
                          <FaWarehouse id="booking_icon"></FaWarehouse>
                        </Col>
                        <Col xs={6} className=" my-auto ">
                          {" "}
                          <div>{item.name}</div>
                        </Col>
                        <Col xs={2} className="my-auto ">
                          {" "}
                          <div
                            className="test"
                            onClick={event => this.completeBuidling(item.id)}
                          ></div>
                        </Col>
                      </Row>
                    </Container>
                  </ListGroupItem>
                );
              })}
            </ListGroup>

После этого отображается список, и он работает нормально. Единственная проблема заключается в том, что Я получаю сообщение об ошибке в консоли enter image description here

Хорошо, теперь есть массив enter image description here

В чем может быть проблема? Заранее спасибо

Ответы [ 3 ]

0 голосов
/ 24 февраля 2020

извлеките все, что вы возвращаете функции карты, в отдельный Компонент и просто передайте реквизиты - тогда вы можете использовать только один key 

const ListGroupItemRow = ({fluid, name, id}) => (
<ListGroupItem className="booking_list_group ">
                    <Container
                      className="booking_building my-auto "
                      fluid={true}
                    >
                      <Row>
                        <Col xs={4} className="text-center my-auto">
                          <FaWarehouse id="booking_icon"></FaWarehouse>
                        </Col>
                        <Col xs={6} className=" my-auto ">
                          {" "}
                          <div>{name}</div>
                        </Col>
                        <Col xs={2} className="my-auto ">
                          {" "}
                          <div
                            className="test"
                            onClick={event => this.completeBuidling(id)}
                          ></div>
                        </Col>
                      </Row>
                    </Container>
                  </ListGroupItem>
)

, а затем использовать 

{this.state.buildings.map(item => (<ListGroupItemRow ...item key={item.id} />))}

Я не проверял это конечно, но я добавляю это, потому что меня попросили быть более точным c и многословным.

0 голосов
/ 25 февраля 2020

Ваш пример должен работать. Вы уверены, что ошибка не относится к другому сопоставлению? Сообщение об ошибке гласит div и (при условии, что вы используете Reactstrap) ListGroupItem отображает элементы li, поэтому, возможно, вы забыли включить ключи где-то еще в вашем приложении.

0 голосов
/ 24 февраля 2020

просто добавьте ключ вот так. но я думаю, что это должно работать для приведенного выше кода 

          <ListGroup id="building_list">
              {this.state.buildings.map((item,index) => {
                return (
                  <ListGroupItem className="booking_list_group " key={index}>
                    <Container
                      className="booking_building my-auto "
                      fluid={true}
                    >
                      <Row>
                        <Col xs={4} className="text-center my-auto" key={"col1"+index}>
                          <FaWarehouse id="booking_icon"></FaWarehouse>
                        </Col>
                        <Col xs={6} className=" my-auto " key={"col2"+index}>
                          {" "}
                          <div>{item.name}</div>
                        </Col>
                        <Col xs={2} className="my-auto " key={"col3"+index}>
                          {" "}
                          <div
                            className="test"
                            onClick={event => this.completeBuidling(item.id)}
                          ></div>
                        </Col>
                      </Row>
                    </Container>
                  </ListGroupItem>
                );
              })}
            </ListGroup>
...