Как обновить компонент?

Question

Задача такова: отфильтровать массив с объектами внутри, по "type"(в массиве можете увидеть). В зависимости от того на какую кнопку фильтрации нажимает пользователя массив отфильтровуется, пишу я на реакт. Я фильтрую массив и получаю новые данные по фильтру, но компонент не обновляется, а массив изменен.

// Состояние с массивом:
const [data, setData] = useState([
    createData('26.01.2021', [
      { type: 'Сканы', name: 'Джиэфси27.12.2020.jpg', id: 0, checked: false },
      { type: 'Накладная', name: 'Джиэфси27.12.2020.jpg', id: 1, checked: false },
      { type: 'Уставные документы', name: 'Джиэфси27.12.2020.jpg', id: 2, checked: false },
      { type: 'Накладная', name: 'Джиэфси27.12.2020.jpg', id: 3, checked: false },
    ]),
    createData('25.01.2021', [
      { type: 'Расходы', name: 'Джиэфси27.12.2020.jpg', id: 4, checked: false },
      { type: 'Накладная', name: 'Джиэфси27.12.2020.jpg', id: 5, checked: false },
      { type: 'Накладная', name: 'Джиэфси27.12.2020.jpg', id: 6, checked: false },
      { type: 'Накладная', name: 'Джиэфси27.12.2020.jpg', id: 7, checked: false },
    ]),
  ])

// переменная хранящая измененный массив 
let filtrationData = []; 

// функция отвечающая за фильтрацию
  const filtration = (data, filterSetting) => {
      filtrationData = [];
      data.forEach(dt => {
          filtrationData = [
            ...filtrationData,
            {date: dt.date, files: dt.files.filter(fl => fl.type == filterSetting)}
          ];
      });
      return filtrationData;
  };

Я не мутирую изначальное состояние а изменяю лишь массив фильтрации. Но это ничего не изменяется :/

Answer 1

data это стейт,

setData это способ обновить этот самый стейт

также setData принимает предыдущий стейт как аргумент

в твоем примере это выглядит так

export const App = () => {

  const [data, setData] = useState([
    {date:'26.01.2021',
    files: [
      { type: 'Сканы', name: 'Джиэфси27.12.2020.jpg', id: 0, checked: false },
      { type: 'Накладная', name: 'Джиэфси27.12.2020.jpg', id: 1, checked: false },
      { type: 'Уставные документы', name: 'Джиэфси27.12.2020.jpg', id: 2, checked: false },
      { type: 'Накладная', name: 'Джиэфси27.12.2020.jpg', id: 3, checked: false },
    ]},
   { date:'25.01.2021',
    files: [
      { type: 'Расходы', name: 'Джиэфси27.12.2020.jpg', id: 4, checked: false },
      { type: 'Накладная', name: 'Джиэфси27.12.2020.jpg', id: 5, checked: false },
      { type: 'Накладная', name: 'Джиэфси27.12.2020.jpg', id: 6, checked: false },
      { type: 'Накладная', name: 'Джиэфси27.12.2020.jpg', id: 7, checked: false },
    ]},
  ])

  const filtration = (filterSetting) => {
    setData((prev) => {
      return prev.map(e => {
        return ({
          ...e,
          files:e.files.filter(fl => fl.type === filterSetting)
        })
      })
    })
  }
  const onClick = () => {
    filtration(`Сканы`)
  }
  return (
    <div>
      {JSON.stringify(data)}
      <br/>
      <button onClick={onClick}>change</button>
    </div>
  )
}

БЛОГ НА HUSL

Как обновить компонент?

Ответы (1 шт):