Stack Overflow em Português Asked on September 27, 2021
Estou iniciando nesse mundo do Javascript
e tenho um projeto que estou desenvolvendo que fiz a implementação do SWR no mesmo e com isso deixei de usar o useEffect
e o useState
do elemento principal que era o inventories.
Para a primeira renderização do componente esta funcionando 100%
o meu problema está ocorrendo em uma function
onde eu faço um filtro por Data e o retorno era colocado no estado do setInventorie
e com isso era renderizado na tela os inventários de acordo com a pesquisa.
Gostaria de saber como posso refatorar meu código dessa função para se adequar e renderizar esse filtro quando necessário agora que estou utilizando o SWR, visando que agora o response.data
que me é retornando não é atribuído ao estado e com isso, mesmo fazendo a pesquisa corretamente nada é renderizado em tela.
Como era sem o SWR:
export default function Profile() {
const [inventories, setInventories] = useState([]);
const [selectedDate, handleDateChange] = useState('');
const history = useHistory();
moment.locale("pt-BR");
useEffect(() => {
axios.get('inventoryGroup', {
headers: {
Authorization: token,
}
}).then(response => {
setInventories(response.data);
});
}, [token]);
async function dataFilter(date) {
handleDateChange(date);
try{
await axios.get(`/inventoryGroup?created_at=${moment(date).format("DD/MM/YYYY")}`).then(response => {
if(response.data.length > 0) {
toast.success('Inventário encontrado.');
setInventories(response.data);
} else {
toast.error('Nenhum inventário encontrado.');
axios.get(`/inventoryGroup`).then(response => {
setInventories(response.data);
})
}
})
} catch(error) {
toast.error(`Erro ao filtrar inventários ${error}`);
}
}
return (
<MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils} locale="pt-BR">
<KeyboardDatePicker
value={selectedDate}
placeholder="Escolha uma data"
onChange={date => dataFilter(date)}
helperText={''}
format="DD/MM/yyyy"
error={null}
/>
</MuiPickersUtilsProvider>
{inventories.map(inventorie => (
<div>
<div className="separator"></div>
<tbody className="list-content" key={inventorie.id}>
<tr>
<td>{inventorie.collector}</td>
</tr>
<tr>
<td>{inventorie.count}</td>
</tr>
<div className="inventorie-button">
<button onClick={() => collectorDetail(inventorie.collector)}
type="button" >
<FiPlus scale={20} color="#a8a8b3" />
</button>
<button onClick={() => download_txt(inventorie.collector)}
type="button" >
<FiDownload scale={20} color="#a8a8b3" />
</button>
</div>
</tbody>
</div>
))}
)
Como está agora com o SWR:
export default function Profile() {
const [inventories, setInventories] = useState([]);
const [selectedDate, handleDateChange] = useState('');
const history = useHistory();
moment.locale("pt-BR");
const { data } = useFetch(inventories ? 'inventoryGroup' : false);
if(!data) {
return <p>Carregando...</p>
}
async function dataFilter(date) {
handleDateChange(date);
try{
await axios.get(`/inventoryGroup?created_at=${moment(date).format("DD/MM/YYYY")}`).then(response => {
if(response.data.length > 0) {
toast.success('Inventário encontrado.');
setInventories(response.data);
} else {
toast.error('Nenhum inventário encontrado.');
axios.get(`/inventoryGroup`).then(response => {
setInventories(response.data);
})
}
})
} catch(error) {
toast.error(`Erro ao filtrar inventários ${error}`);
}
}
return (
<div className="profile-container">
<MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils} locale="pt-BR">
<KeyboardDatePicker
value={selectedDate}
placeholder="Escolha uma data"
onChange={date => dataFilter(date)}
helperText={''}
format="DD/MM/yyyy"
error={null}
/>
</MuiPickersUtilsProvider>
{<div className="inventorie-list">
<tbody className="list-title">
<tr>
<td>Coletor:</td>
</tr>
<tr>
<td>Quantidade de Registros:</td>
</tr>
</tbody>
{data.map(inventorie => (
<div>
<div className="separator"></div>
<tbody className="list-content" key={inventorie.id}>
<tr>
<td>{inventorie.collector}</td>
</tr>
<tr>
<td>{inventorie.count}</td>
</tr>
<div className="inventorie-button">
<button onClick={() => collectorDetail(inventorie.collector)}
type="button" >
<FiPlus scale={20} color="#a8a8b3" />
</button>
<button onClick={() => download_txt(inventorie.collector)}
type="button" >
<FiDownload scale={20} color="#a8a8b3" />
</button>
</div>
</tbody>
</div>
))}
</div>}
</div>
);
}
Função do useFetch que importo para utilização:
import useSWR from 'swr'
import axios from 'axios';
export function useFetch(url) {
const { data, error, mutate } = useSWR(url, async url => {
const response = await axios.get(url);
return response.data;
}, {
refreshInterval: 1000,
refreshWhenHidden: true
})
return { data, error, mutate }
}
Lembrando que estou passando apenas o código das partes de onde realmente está meu problema no código.
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP