useEffect () заставляет мое приложение зависать, когда я нажимаю на выбор - PullRequest
Новая
       81

useEffect () заставляет мое приложение зависать, когда я нажимаю на выбор

0 голосов
/ 19 июня 2020

У меня есть 2 JSON файлов.

место назначения. json: 

[
   {
     "id": "1",
     "destination": "usa"
   },
  {
    "id": "2",
    "destination": "canada"
      }
]

мест. json

[
      {
        "country": "canada",
        "places": "toronto"
      },
      {
        "country": "usa",
        "places": "new york"
          }
    ]

const App = (props) =>{
   const [data, setData] = useState([])
   const [filteredData, setFilteredData] = useState([])

   let item;
   const filter(options){
   //do something
   }
   useEffect(()=>{
      if(data){
         item = [destination, places].reduce((p,q =>
                p.map((c,i) => Object.assign({},{country:[c.destination], 
                places: q[i].places})))

  setData(item)
  }
},[data])

return(
   <div>
      <div>
         <Select onChange={(e)=> filter(e)}>
            <Option value="usa"> USA </Option>
            <Option value="canada"> Canada </Option>
         </Select>
      </div>
      <div>
          {data.map(d=>
              <li>{d.country} : {d.places}</li>
          )}
      </div>
   </div>
)}

Это отлично работает. Данные отображаются в тот момент, когда я нахожусь на веб-странице. Но проблема в том, что у меня есть вариант выбора из раскрывающегося списка. В тот момент, когда я щелкнул раскрывающийся список, моя веб-страница зависла. Я не уверен, почему он (я думаю) всегда рендерится после того, как я щелкнул панель выбора.

Примечание: в моем раскрывающемся списке еще нет logi c.

...