Почему следующий функциональный компонент React не работает должным образом? - PullRequest
Новая
       2

Почему следующий функциональный компонент React не работает должным образом?

0 голосов
/ 09 мая 2020

Это довольно просто, когда вы нажимаете «добавить», он должен добавить (и он добавляет), а когда вы нажимаете «удалить», он должен вытолкнуть последний элемент и повторно отобразить список, но этого не происходит. Я где-то ошибаюсь? 

import React, { useState, useEffect } from 'react';


const Test = () => {
    const [list, setList] = useState([]);
    const add = () => {
        setList([list.length, ...list]);
    }

    const remove = () => {
        list.pop();
        setList(list);
    }

    useEffect(() => {
        console.log(list)
    }, [list])

    return (<ul>
        <button onClick={add}>add</button>
        <button onClick={remove}>remove</button>
        {list.map(el => <li>{el}</li>)}
    </ul>)
}

export default Test;

UPDATE: На самом деле он обновляет состояние, удаляя последний элемент, но повторный рендеринг происходит только при нажатии кнопки «добавить»

Ответы [ 2 ]

0 голосов
/ 09 мая 2020

В этом случае вам нужно установить новый массив, setList(list) не приведет к повторной визуализации React, потому что это все тот же массив, который вы используете.

Попробуйте setList([...list]) в вашем remove function.

Существует также альтернатива pop, которая не изменяет исходную переменную: 

  const remove = () => {
    const [removed, ...newList] = list
    setList(newList)
  }
0 голосов
/ 09 мая 2020

Не рекомендуется изменять само состояние, потому что оно неизменяемо.

Поэтому вместо использования .pop() в исходном состоянии массива, сначала я предлагаю клонировать это и удалите оттуда требуемый элемент, тогда результат должен быть передан в функцию setList().

Попробуйте вместо этого следующее: 

const remove = () => {
    const copy = [...list];
    copy.pop();
    setList(copy);
}

Подумайте о следующем: 

const list = [1,3,5,6,7];
const copy = [...list];
copy.pop();

console.log(list);
console.log(copy);

Надеюсь, это поможет!

...