Блог

Главная - Вопросы по программированию - Как передавать объекты массива или хранить их в редукторе с помощью интерфейса и как работает фильтр на нем?

Как передавать объекты массива или хранить их в редукторе с помощью интерфейса и как работает фильтр на нем?

#reactjs #filter #redux-reducers

Вопрос:

У меня возникла проблема при хранении массива объектов в состоянии с использованием редукторов. У меня был этот код ниже:

Это мой интерфейс:

 interface fontStyle {
     fontSize: number;
     fontData: FontFamily[];
}

interface FontFamily {
     family: string;
}

Именно здесь он загружается, а редукторы просто сохраняют состояние.

 const {state, dispatch} = fontReducer();
const font: fontData[] = []
for (let font in data.items) {
    font.push({ family: font.family,})
}
dispatch({type: 'fontStyle', action: font})

Затем однажды я попытался создать неупорядоченный список с помощью поиска

 <ul>
    {state.fontData.filter((item) => item.family.toLowerCase().includes(search)).map(font => (
         <li key={font.family}} onClick={selectFont}> {font.family} </li>
    ))}
</ul>

Фильтр не распознает данные шрифта, и возникла ошибка, что это не определено => "TypeError: Cannot read property 'filter' of undefined"

Вот редуктор —

 const fontReducerHandler = () => { 
    switch (action.type) { 
        case "fontStyle": 
            return { ...state, fontData: action.fontData }
    }
}

const initialState: fontStyle { 
    fontSize: 0, 
    fontData: [], 
}

export const fontReducer = () => {
    const [state, dispatch] = useReducer(fontReducerHandler, initialState);
    return { state, dispatch }
}

Комментарии:

1. Исправление в шрифте const — вместо FontData должно быть FontFamily[] = []

2. state.fontData должно быть undefined , тогда — не могли бы вы показать нам редуктор и селектор, которые вы используете для получения state.fontData ?

3. Есть state.FontData. const fontReducerHandler = () => { переключатель(action.type) { регистр «Стиль шрифта» : возврат {…состояние, данные шрифта: action.FontData} } } const начальное состояние: стиль шрифта { Размер шрифта: 0, данные шрифта: [], } экспорт const fontReducer = () =>> { const [состояние, отправка] = Пользователь(fontReducerHandler , начальное состояние); возврат {состояние, отправка} }

4. Похоже action.fontData , что в редукторе нет — перед тем switch , как попытаться сделать console.log(action)

5. На самом деле, я попробовал, есть действие.FontData, извините, если я пропустил тип: тип действия = { тип: «Стиль шрифта» FontData: семейство шрифтов[] }

Ответ №1:

Вопрос

Похоже, вы неправильно обращаетесь к полезной нагрузке действия. Вы отправляете

 const font: fontData[] = [];
for (let font in data.items) {
  font.push({ family: font.family,});
}
dispatch({ type: 'fontStyle', action: font })

Где action находится массив FontData, но в редукторе, к которому вы обращаетесь action.fontData , который не определен.

 const fontReducerHandler = () => { 
  switch (action.type) { 
    case "fontStyle": 
        return { ...state, fontData: action.fontData } // action.fontData undefined!!
  }
}

Решение

Правильно получите доступ к полезной нагрузке действия.

 const fontReducerHandler = () => { 
  switch (action.type) { 
    case "fontStyle": 
        return { ...state, fontData: action.action }
  }
}

Или, в качестве альтернативы, вы можете правильно сформировать объект действия, чтобы он соответствовал способу доступа к нему в функции редуктора.

 const font: fontData[] = [];
for (let font in data.items) {
  font.push({ family: font.family,});
}
dispatch({ type: 'fontStyle', fontData: font });

Теперь action.fontData все определено.

Метки: