TypeError: info is not iterable

Question

TypeError: info is not iterable

Рейтинг: 1Ответов: 1Опубликовано: 23.02.2023

Есть некая функция и к ней привязана кнопка, при нажатии на которую добавляются инпуты. При нажатии кнопки выводится такая ошибка:

Код

const CreateDevice = ({show, onHide}) => {
  const {device} = useContext(Context);
  const {info, setInfo} = useState([]);
  const addInfo = () => {
        setInfo([...info, {title: '', description: '', number: Date.now()}]);
    };
  return (
      <Modal
      show={show}
      onHide={onHide}
      size="lg"
      centered
      className="dark-modal"
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter" className="title-modal">
          Добавить устройство
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <Form>
          <Dropdown className="dropDown mb-2">
            <Dropdown.Toggle>Выберите тип</Dropdown.Toggle>
            <Dropdown.Menu>
              {device.types.map(type =>
                <Dropdown.Item key={type.id}>{type.name}</Dropdown.Item>
              )}
            </Dropdown.Menu>
          </Dropdown>
          <Dropdown className="dropDown mb-2">
            <Dropdown.Toggle>Выберите бренд</Dropdown.Toggle>
            <Dropdown.Menu>
              {device.brands.map(brand =>
                <Dropdown.Item key={brand.id}>{brand.name}</Dropdown.Item>
              )}
            </Dropdown.Menu>
          </Dropdown>
          <Form.Control placeholder="Введите название устройства" className="mb-2 form-input"></Form.Control>
          <Form.Control placeholder="Введите стоимость устройства" className="mb-2 form-input" type="number"></Form.Control>
          <Form.Control className="mb-2" type="file"></Form.Control>
          <hr/>
          <Button variant="outline-light button-add" onClick={addInfo}>Добавить свойство +</Button>
          {info && info.map.keys(i =>
              <Row>
                <Col md={4}>
                  <Form.Control
                    placeholder="Введите название свойства"
                  />
                </Col>
                <Col md={4}>
                  <Form.Control
                    placeholder="Введите описание свойства"
                  />
                </Col>
                <Col md={4}>
                  <Button variant={"outline-danger"}>Удалить</Button>
                </Col>
              </Row>
              )}
        </Form>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="outline-danger" onClick={onHide}>Закрыть</Button>
        <Button variant="outline-success" onClick={onHide}>Добавить</Button>
      </Modal.Footer>
    </Modal>
  );
};

Как можно пофиксить это?

javascript reactjs axios mobx react-router-dom

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Проблема в данном коде заключается в том, что функция useState возвращает массив из двух элементов, где первый элемент - текущее значение состояния, а второй элемент - функция для обновления состояния. Однако в данном коде переменной setInfo присваивается второй элемент массива вместо функции для обновления состояния.

Ошибку можно исправить, заменив метод .map.keys() на метод .map()

{info && info.map((item, i) =>
  <Row key={i}>
    <Col md={4}>
      <Form.Control placeholder="Введите название свойства" />
    </Col>
    <Col md={4}>
      <Form.Control placeholder="Введите описание свойства" />
    </Col>
    <Col md={4}>
      <Button variant={"outline-danger"}>Удалить</Button>
    </Col>
  </Row>
)}

UPD
Так же исправьте
const {info, setInfo} = useState([]);

На
const [info, setInfo] = useState([]);

TypeError: info is not iterable

Ответы