Реагировать js refre sh функциональный компонент после получения всех данных - PullRequest
Новая
       9

Реагировать js refre sh функциональный компонент после получения всех данных

0 голосов
/ 16 апреля 2020

Я использую функциональный компонент реагирования и извлекаю внешние данные для l oop. Проблема заключается в бесконечном обновлении компонента. Ниже я пытаюсь сделать следующее: 

const SongGrid = (props: any) => {
 const [songData, setSongData] = useState(props.location.state.items);
 useEffect(() => {
    const fetchData = (data: any) => {
     CommonService.postApiExecutor('getdata', {data.id})
     .then((response) => { 
        element.extProp1 = response.data.one;
        setSongData(
        songData.map((item: any) =>
          item.song_id === song.song_id
            ? { ...item, extProp1 : extProp1 }
            : item,
        ),
      );
      })
    }
    songDataObj.forEach((element: any) => {
      fetchData(element)
    })
 },[songData])
 return (
  <div>
   <table>
     <thead><th>Song Name</th><th>Ext property 1</th></thead>
     <tbody>
      {songDataObj.map((song: any, i: any) => (
       <tr>
        <td>song.songName</td>
        <td>{song.extProp1?song.extProp1:''}</td>
       </tr>
      ))}
     </tbody>
   </table>
 </div>
 )
}

Я обновление songData для каждого ответа и обновление ячеек таблицы не менее 70, 80 раз и падение страницы.

Ответы [ 3 ]

0 голосов
/ 16 апреля 2020

используйте это useEffect(() => ,[]) вместо useEffect(() => )

проблема в том, что вы вызываете setState внутри useEffect, и каждый раз, когда происходит повторный рендеринг, он вызывает повторный запуск useEffect, снова вызывает setState и вызывает снова используйтеEffect, и он снова вызывает setState и ........... он продолжается вечно. поэтому, чтобы ограничить это, вы должны поместить [зависимость] в конец хука useEffect. управлять тем, когда срабатывает вызов useEffect, или вы можете управлять им, помещая предложение If внутри useEffect, чтобы не запускать сетевой вызов снова.

0 голосов
/ 16 апреля 2020

Проблема из-за использования setState внутри useEffect. Он будет работать каждый раз, когда изменяется состояние, а сам изменяет состояние. Вы можете определить зависимость в функции useEffect, чтобы предотвратить ее бесконечное повторное выполнение. 

useEffect(()=>{} ,[])

Добавление пустого массива в качестве второго параметра в useEffect означает, что он будет запускаться только один раз при монтировании компонента.

0 голосов
/ 16 апреля 2020

, когда вы хотите сделать что-то вроде componentDidMount, вам нужно добавить это

useEffect(()=>{ [you code here] },[]) <---- you forgot the brackets

, если в скобках ничего нет, будет выполняться только код один раз внутри useEffect.

если переменная находится внутри скобки, она будет запускать useEffect каждый раз, когда значение внутри скобки изменяется

...