Как использовать useSelector при обновлении страницы

#javascript #reactjs #redux

Вопрос:

У меня есть следующий код внутри моего функционального компонента.

 const { id } = useParams();  
const categories = useSelector((state) => {
     const allCategories = state.allCategories;
     return allCategories.filter(cat => cat.id === id); 
}); 
const [code, setCode] = useState(categories.length === 1 ? categories[0].code : '');

Однако этот код выполняется корректно только один раз. Затем, если я обновлю страницу, это не сработает. Пожалуйста, помогите мне исправить эту проблему. Кроме того, если это противоречит рекомендациям, пожалуйста, дайте мне знать, как правильно это сделать.
Фактический вариант использования заключается в том, что есть таблица категорий, и пользователь нажимает «редактировать категорию», а затем я перехожу к этому компоненту для отображения текущих данных (т. Е. Кода категории). Поскольку в таблице категорий уже есть данные, allCategories заполняется

1. Не могли бы вы пояснить, что вы подразумеваете под не работает при обновлении страницы?

2. Где allCategories заполняется часть состояния? Единственный способ, которым я вижу, что эта проблема возникает, — это если вы переходите к маршруту / компоненту, который заполняется, allCategories а затем переходите к этому компоненту. Тем не менее, если вы перезагружаете, у него нет allCategories состояния, поэтому он не работает.

3. Я предполагаю, что state.allCategories это задается путем отправки действия, поэтому вы должны отправить это действие в эффекте. Если они извлекаются асинхронно, вам следует добавить метаданные загрузки и ошибок, чтобы вы могли показать результат асинхронного действия.

4. @szczocik не работает, означает, что для кода категории не задано значение переменной состояния «code»

5. @ljbc1994 allCategories находится в состоянии redux. Он заполняется вызовом внутреннего API. Фактический вариант использования заключается в том, что есть таблица категорий, и пользователь нажимает «редактировать категорию», а затем я перехожу к этому компоненту для отображения текущих данных (т. Е. Кода категории). Поскольку в таблице категорий уже есть данные, allCategories заполняется.

Ответ №1:

поскольку данные изменены в каком-то другом месте программы, его целесообразно использовать в качестве значения состояния по умолчанию … вместо этого привязать значение с useEffect()

 const { id } = useParams();  
const categories = useSelector((state) => {
     const allCategories = state.allCategories;
     return allCategories.filter(cat => cat.id === id); 
}); 
const [code, setCode] = useState(''); 
useEffect(()=>{
    if(categories.length === 1)
        setCode(categories[0].code)
},[categories.lengthamp;amp;categories[0].?code])

ПРИМЕЧАНИЕ: код будет установлен таким образом при categories[0].code каждом изменении…

Ответ №2:

Вы можете использовать что-то вроде redux-persist для сохранения состояния redux в локальном хранилище или в другой системе хранения