#javascript #reactjs #redux #react-hooks #logic
Вопрос:
У меня есть приложение react-redux с redux-presist — я пытаюсь отфильтровать элементы с одинаковыми именами из 2 массивов объектов — «службы» и «Статусные службы». В настоящее время мой код работает нормально, но проблема в том, что при чистом первом отображении мой список становится пустым, т. е. [], я не получаю никаких ошибок, но список просто пуст, если я проверяю локальное состояние, но если я обновлю страницу, я увижу список, заполненный нечетными элементами, т. е. 11 элементов, которых нет в «statusOfServices». Может ли кто-нибудь помочь выяснить, почему мои данные не устанавливаются при первом монтировании? вот мой код — Кроме того, можно ли создать новое состояние redux из вызова API и изменить его с помощью useEffect для повторного запуска компонента? Я не могу поместить список в зависимость, потому что он идет в бесконечном цикле повторной передачи
//my other MUI / REACT / REDUX IMPORTS //from API I GET THIS // e.g. state of list of services from API // const services = [ // "dailyScripts.job.js", // "datawarehouse.job.js", // "dump.job.js", // "finn.job.js", // "finnAbroad.job.js", // "finnIndustry.job.js", // "finnLeisure.job.js", // "finnPlots.job.js", // "finnPlotsIndustry.job.js", // "finnPlotsLeisure.job.js", // "finnRental.job.js", // "finnSoldAt.job.js", // "finnSoldAtDoubleCheck.job.js", // "finnUsed.job.js", // "upload_latest_dump.job.js", // ]; // const statusOfServices = [ // {pid: 0, name: 'dailyScripts', pm_id: 0}, // {pid: 0, name: 'datawarehouse', pm_id: 1}, // {pid: 0, name: 'dump', pm_id: 2}, // {pid: 0, name: 'finn', pm_id: 3} // ] import React, { useEffect, useState } from "react"; //redux imports import { useSelector, useDispatch, batch } from "react-redux"; const PM2ServiceData = () =gt; { const dispatch = useDispatch(); //get token const _token = useSelector((state) =gt; state.user.token); useEffect(() =gt; { const fetchData = async() =gt; { try { if (_token) { batch(() =gt; { dispatch(fetchServices(_token)); }); } else { return; } } catch (error) { console.log(error.message); } }; fetchData(); }, [_token, dispatch]); const services = useSelector((state) =gt; state.user.listOfServices); const statusServ = useSelector((state) =gt; state.user.statusOfServices); const [list, setList] = useState([]); useEffect(() =gt; { console.log(services, "--1 services name"); console.log(statusServ, "--2 status name"); setList(services); if (statusServ.length gt; 0) { const jobJs = ".job.js"; const filteredServices = list.filter((item) =gt; { const findItem = statusServ.find((serv) =gt; { const str = item.replace(jobJs, ""); console.log(serv.name === str); return serv.name === str; }); console.log(findItem, "find item bool -- 3"); if (findItem) { return item !== `${findItem.name}${jobJs}`; } return item; }); console.log(filteredServices, "-- 4"); setList(filteredServices); } }, [services, statusServ]); //dependency asking for list //if i add list it keeps rerending infinitely so removed list const handleClick = (item, index, event) =gt; { console.log(item, "item name?"); const trim = ".job.js"; const trimmed = item.toString().replace(trim, ""); let startService = { script: item, name: trimmed, token: _token, }; dispatch(startScript(startService)); }; return ( lt; div gt; lt; TableContainer component = { Paper } sx = { { overflow: "auto", maxHeight: 400 } } elevation = { 3 } className = "tableContainer" gt; lt; Table sx = { { minWidth: 650, } } stickyHeader aria - label = "sticky table" gt; lt; TableHead gt; lt; TableRow gt; lt; TableCell gt; App Name lt; /TableCellgt; lt; TableCell gt; Start lt; /TableCellgt; lt; /TableRowgt; lt; /TableHeadgt; lt; TableBody gt; lt; React.Fragment gt; { services ? ( list.map((item, index) =gt; ( lt; TableRow key = { index } sx = { { "amp;:last-child td, amp;:last-child th": { border: 0 }, } } gt; lt; TableCell component = "th" scope = "row" gt; { item } lt; /TableCellgt; lt; TableCell component = "th" scope = "row" gt; lt; Button variant = "contained" onClick = { (event) =gt; handleClick(item, index, event) } gt; Start lt; /Buttongt; lt; /TableCellgt; lt; /TableRowgt; )) ) : ( lt; Typography variant = "h4" gt; Fetching lt; /Typographygt; ) } lt; /React.Fragmentgt; lt; /TableBodygt; lt; /Tablegt; lt; /TableContainergt; lt; /divgt; ); }; export default PM2ServiceData;