ZamarShoo
@ZamarShoo
React/Vue, Node/PHP, Wordpress/Drupal

Почему бесконечно перерисовывается и как сделать правильно?

(React Hooks)
График рисуется через данные, которые лежат в редаксе, если я удаляю элемент в этих данных через экшн то начинается бесконечная перерисовка, в чем проблема?

const Chart = React.memo((props) => {
    const [data, setData] = useState(props.items.map((elem) => {
        return elem.weight
    }))
    const svgRef = useRef()

    useEffect(() => {

        setData(props.items.map((elem) => {
            return elem.weight
        }))
        const svg = select(svgRef.current)

        const xScale = scaleLinear()
            .domain([0, data.length - 1])
            .range([0, 1240])

        const yScale = scaleLinear()
            .domain([min(data), max(data)])
            .range([280, 0])
        const myLine = line()
            .x((value, index) => xScale(index))
            .y(value => yScale(value))
            .curve(curveCardinal)
        svg
            .selectAll('path')
            .data([data])
            .join('path')
            .attr('d', value => myLine(value))
            .attr('fill', 'none')
            .attr('stroke', 'lavender')
            .attr('stroke-width', '3px')
            .attr('width', '100%')
    }, [data, props.items])

    return (
        <div className={s.elem}>
            <svg viewBox={'0 -9 1240 300'}
                ref={svgRef}></svg>
        </div>
    )
})
  • Вопрос задан
  • 108 просмотров
Решения вопроса 1
hzzzzl
@hzzzzl
useEffect(() => {

        setData(props.items.map((elem) => {   // setData
            return elem.weight
        }))

      } , [data, props.items] })    // data?


вот тут эффект слушает изменения data, и ты в нем же меняешь data, тем самым его перезапуская..
и зачем вообще хранить data в стейте, вместо того чтобы напрямую использовать props.items из стора?
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
ZamarShoo
@ZamarShoo Автор вопроса
React/Vue, Node/PHP, Wordpress/Drupal
Я неправильно выразился: Я пробовал и вытаскивать setData и убирать (что мне казалось с самого начала логично), ибо следит за изменениями props.items, но вот если пропс изменяется, то как перезаписать data?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы