React / Javascript не может найти элементы в array.map

import React, { Component } from "react";

class LogIssueScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    fetch(`${apiRoot}log_issue`, {
      method: "GET",
    })
      .then(response => response.json())
      .then(data => {
        this.setState({
          fields: data.fields
        });
      });
  }

  render() {
    return (
      <div className = "container-fluid">
        {this.state.fields ? (
          <div className = "row">
            <div className = "col col-md-6 my-3 mx-auto">
              this.state.fields.filter(x => (x.choices != null)).map((item,
              index) => (
              <div className = "row align-items-center">
                <div className = "col-3">{item.name}</div>
                <div className = "col my-3 mx-auto">
                  <Dropdown
                    value = {item.name}
                    choices = {item.choices}
                    id = {item.name}
                  />
                </div>
              </div>
              ))
            </div>
          </div>
        ) : (
          "LOADING"
        )}

        <div className = "row">
          <div className = "col-2 my-3 mx-auto">
            <input
              type = "button"
              value = "Log Issue"
              className = "btn btn-block btn-primary"
              onClick = {this.onSubmit}
            />
          </div>
        </div>
      </div>
    );
  }
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Я использую следующий код:

{
  this.state.fields
    ? this.state.fields
        .filter(x => x.choices != null)
        .map((item, index) => (
          <Dropdown
            value = {item.name}
            choices = {item.choices}
            id = {item.name}
            onSelect = {this.handleDropdownSelect}
          />
        ))
    : "LOADING";
}

Результатом являются три копии 'item' is not defined no-undef.

Цель состоит в том, чтобы взять массив «полей» (объектов) в состоянии, отфильтровать его так, чтобы остались только те элементы, ключ «выбора» которых не равен нулю, а затем сопоставить полученный массив с серией раскрывающихся списков. Я попытался заменить {item.foo} строкой, чтобы убедиться, что с компонентом Dropdown все в порядке и что он действительно работает правильно. По какой-то причине карта не может найти "предмет". Я также попытался отбросить ключи (т.е. просто элемент вместо item.foo), чтобы проверить, не выдает ли это другую ошибку, но этого не произошло.

Этот результат, который вы видите, является ошибкой линтинг, а не ошибкой JS (может быть, линтер не понимает JSX так, как должен?)

— 17.12.2018 09:35

Я не уверен, что ты имеешь в виду. Прошу прощения, если моя терминология неверна, но это не работает!

— 17.12.2018 09:36

Код, который вы показали, должен быть в порядке. Возможно, с дополнительным контекстом ...? Обновите свой вопрос, добавив минимальный воспроизводимый пример, демонстрирующий проблему, в идеале работоспособный, используя Stack Snippets (кнопка панели инструментов [<>]). Фрагменты стека поддерживают React, включая JSX; вот как это сделать.

— 17.12.2018 09:37

@CertainPerformance - Да, JSX и / или стрелочные функции ...

— 17.12.2018 09:38

@Alex - Он имеет в виду, что эта ошибка исходит не из JavaScript и почти наверняка не из вашего транспилятора, а из какого-то другого инструмента. (Похоже, это ESLint.)

— 17.12.2018 09:39

@ T.J. Crowder А, извините, я новичок в Js / React. Приложение React использует приложение create-response-app и запускается с npm start. Эта ошибка связана с большой ошибкой «Не удалось скомпилировать» на странице, обслуживаемой командой npm start.

— 17.12.2018 09:42

@Alex - Цепочка инструментов, которую использует приложение create-response-app, довольно надежна. Итак, я думаю, что есть некоторая проблема с кодом до, который вы показали. Если вы выполните MCVE, вы, вероятно, найдете ошибку (а если вы этого не сделаете, вы сможете опубликовать этот MCVE здесь - опять же, запускаемый с помощью Stack Snippets).

— 17.12.2018 09:43

@ T.J. Crowder Я изо всех сил стараюсь не жаловаться на вещи, которых я не понимаю. Кажется, проблема с 'require' в строке: super(props). Помогает ли то, что я опубликовал, в его нынешнем виде?

— 17.12.2018 10:01

@Alex - Пожалуйста, еще раз взгляните на примеры и детали в страница на фрагментах JSX, на которые я ссылался. Вы не можете использовать import (но вам это не нужно с показанными там сценариями), и вам нужно моделировать fetch, а не буквально использовать его и т. д.

— 17.12.2018 10:03

javascript arrays reactjs

17.12.2018 09:34

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 081

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам не хватает одной фигурной пары ({}) в вашем JSX, где вы начинаете писать свой метод filter. Если вы хотите использовать выражение Javascript в своем JSX, вам следует снова использовать фигурные скобки ({}).

  render() {
    return (
      <div className = "container-fluid">
        {this.state.fields ? (
          <div className = "row">
            <div className = "col col-md-6 my-3 mx-auto">
              // here, curlies again
              {this.state.fields
                .filter(x => x.choices != null)
                .map((item, index) => (
                  <div className = "row align-items-center">
                    <div className = "col-3">{item.name}</div>
                    <div className = "col my-3 mx-auto">
                      <Dropdown
                        value = {item.name}
                        choices = {item.choices}
                        id = {item.name}
                      />
                    </div>
                  </div>
                ))}
            </div>
          </div>
        ) : (
          "LOADING"
        )}

        <div className = "row">
          <div className = "col-2 my-3 mx-auto">
            <input
              type = "button"
              value = "Log Issue"
              className = "btn btn-block btn-primary"
              onClick = {this.onSubmit}
            />
          </div>
        </div>
      </div>
    );
  }

Подражающая версия:

const remoteData = {
  fields: [
    { id: "1", name: "foo", choices: ["a"] },
    { id: "2", name: "bar", choices: ["b"] },
    { id: "3", name: "baz", choices: ["c"] },
  ],
};

const fakeRequest = () =>
  new Promise(resolve => setTimeout(() => resolve(remoteData)));

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    fakeRequest().then((data) => {
      this.setState({
        fields: data.fields,
      });
    });
  }

  render() {
    return (
      <div className = "container-fluid">
        {this.state.fields ? (
          <div className = "row">
            <div className = "col col-md-6 my-3 mx-auto">
              {this.state.fields
                .filter(x => x.choices != null)
                .map(item => (
                  <div className = "row align-items-center" key = {item.id}>
                    <div className = "col-3">{item.name}</div>
                    <div className = "col my-3 mx-auto">
                      <Dropdown
                        value = {item.name}
                        choices = {item.choices}
                        id = {item.name}
                      />
                    </div>
                  </div>
                ))}
            </div>
          </div>
        ) : (
          "LOADING"
        )}

        <div className = "row">
          <div className = "col-2 my-3 mx-auto">
            <input
              type = "button"
              value = "Log Issue"
              className = "btn btn-block btn-primary"
              onClick = {this.onSubmit}
            />
          </div>
        </div>
      </div>
    );
  }
}

const Dropdown = ({ name, id }) => (
  <div>
    <p>{name}</p>
    <p>{id}</p>
  </div>
);

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id = "root"></div>

Ты палочка-выручалочка. Точно так же, как я ужасно не мог сделать отрывок. Спасибо!

— 17.12.2018 10:21

Пожалуйста. Я предоставил простой фрагмент @ T.J. Краудер упомянул в своих комментариях. Вы можете изучить его как справочник в будущем.

— 17.12.2018 10:24

А, я вижу, где я ошибся с отрывком. Спасибо. Редактор фрагментов просто говорил «ошибка сценария» в неуказанном месте, поэтому я изо всех сил пытался его отладить.

— 17.12.2018 10:26

17.12.2018 10:19