Блог

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

но когда я запускаю свой код, он, похоже, ничего не заполняет.

Что я делаю не так?

вот мой код:

data.js

 export const countryList = [
    "Afghanistan",
    "Albania",
    "Algeria",
    "American Samoa",
    "Andorra",
    "Angola",
    "Anguilla",
    "Antarctica",....,....,.....]
 

profile.js:

     import { countryList, documentList,shipmentPurposeList } from "../LocalData/data"
    import React, {Component, useState, useEffect} from 'react';
      const [country,setCountry] = useState([]);
    
      useEffect(() => {
            Axios.get('http://localhost:3001/login').then((response) => {
    
                if(response.data.loggedIn == true){
            
                 setCountry(countryList);
                }
            });
        },[]);


     return (

      <Row>
                      <Col md={11}>
                          <Form.Group controlId="exampleForm.ControlInput1"> 
                          <Form.Label className={'font-12 mt-3 color-gray inputLabel'}>Country</Form.Label>
                            <Form.Select aria-label="Select Title">

                                  { country.map((item, i) => {
                                                 
                                     <option key={i} value={item}>
                                      {item}
                                      </option>
                                     
                                     })
                                   }
                                  </Form.Select>
                                 </Form.Group>
                             </Col>
                          </Row>
)
 

У вас есть синтаксическая «ошибка», ваша map функция обратного вызова не возвращает элемент JSX, она просто определяет его

Это должно быть

 { country.map((item, i) => (
                                                 
                                     <option key={i} value={item}>
                                      {item}
                                      </option>
                                     
                                     ))
                                   }
 

Обратите внимание на круглые скобки после стрелки вместо фигурных скобок. Круглые скобки означают, что вы хотите вернуть все, что там есть, в то время как фигурные скобки определяют тело функции.