Ре-рендег компонента React?

Question

[lex bem]

Добрый день, помогите понять, как мне сделать, чтобы ререндерился компонент с новой ссылкой

const block = ({url}) => {
    const [loading, setLoading] = useState(true);
    const [data, setData]:any = useState();

    useEffect(() => {
        if (loading && url !== null) {
            axios.get(url, { responseType: 'blob' }).then(response => {
                setData(window.URL.createObjectURL(response.data));
                setLoading(false);
            });
        }
        return () => {};
    });

    return loading ? (
        <div
            style={{
                width: '100%',
                height: '160px',
                display: 'grid',
                alignItems: 'center',
                justifyContent: 'center'
            }}
        >
            <FontAwesomeIcon
                style={{ fontSize: 20 }}
                spin
                icon={faSpinner}
            />
        </div>
    ) : (
        <div style={{ width: '100%', height: 160 }}>
            <img
                style={{
                    objectFit: 'contain',
                    objectPosition: 'center',
                    maxWidth: '100%',
                    maxHeight: '100%'
                }}
                width="100%"
                height="auto"
                src={data}
            />
        </div>
    );
}

При первом старте все хорошо, но когда динамически изменяю пропсы props.url то уже почему то не меняется data - которая вроде setData на новую

Answer 1

[raury]

loading всегда false после первого рендера => условие не выполняется => состояние не меняется => компонент не перерисовывается

Comments

[lex bem]

а разве когда компонент опять постарается отрисоваться он не исполнит useState(true) на loading ?

[raury]

lex bem, тут точно не могу сказать
вот попробуй так

useEffect(() => {
        if (loading && url !== null) {
            axios.get(url, { responseType: 'blob' }).then(response => {
                setData(window.URL.createObjectURL(response.data));
                setLoading(false);
            });
        }
        return () => setLoading(true);
    }, [url]);

[lex bem]

raury, теперь блоки больше похожи на перезаписанные но они подвисают в loading, что отчасти и понятно. может я где то изначально в fetche не прав?