#reactjs #react-redux
Вопрос:
Я пытаюсь занести некоторые данные в таблицу. Для этого я использую функцию react Map (). Но переменная находится внутри функции, и я не могу использовать ее в map. Каков самый простой способ использовать эту переменную в map.
Это мое кодирование
import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { getAllActivityDetails } from 'app/store/activityTracker/activitySlice';
const ActivityLog = () => {
const dispatch = useDispatch();
useEffect(() => {
getAllActivities();
}, []);
const getAllActivities = async () => {
const user = await JSON.parse(localStorage.getItem('user'));
const paramsData = {
_entity: 'ActivityTrack',
_select: '*',
channel: 'KOORS',
email: user amp;amp; user.data amp;amp; user.data.email ? user.data.email : ''
};
console.log('Email', user);
const res = await dispatch(getAllActivityDetails(paramsData));
console.log('res', res);
};
return (
<div className="flex flex-col mt-8">
<div className="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
<div className="inline-block min-w-full overflow-hidden align-middle border-b border-gray-200 shadow sm:rounded-lg">
<table className="min-w-full">
<thead>
<tr>
<th className="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-100 uppercase border-b border-gray-200 bg-gray-50">
.
</th>
<th className="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-900 uppercase border-b border-gray-200 bg-gray-50">
Actions
</th>
<th className="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-900 uppercase border-b border-gray-200 bg-gray-50">
Users
</th>
</tr>
</thead>
<tbody className="bg-white">
{res.data.data.map(log => (
<tr>
<td className="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
<div className="flex items-center">
<div className="ml-4">
<div className="text-sm font-medium leading-5 text-gray-600">
{log.userName}
</div>
<div className="text-sm font-medium leading-5 text-gray-800">
{log.createdAt}
</div>
</div>
</div>
</td>
<td className="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
<div className="text-sm leading-5 text-gray-800">{log.activityCode}</div>
</td>
<td className="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
<div className="text-sm leading-5 text-gray-800">{log.description}</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
);
};
export default ActivityLog;
Мне нужно использовать переменную » res » на карте. Но он отображается, так как res не определен.
Это ответ, который я получаю[не могу поделиться полным результатом]
Пытаюсь сделать это с утра. Если я создам какие-либо внешние переменные, другие функции, связанные с этим, изменятся. Итак, как я могу получить подробную информацию на карте, ничего не меняя в текущем коде? Пожалуйста, помогите.
Мне просто нужно получить значения » res » по всему миру.
Комментарии:
1. Проблема не ясна. Чего вы пытаетесь добиться
resи как вы используете то , что это приводит к неудаче. Пожалуйста, предоставьте минимальный и воспроизводимый код.2. Вы можете вернуть разрешение из этой функции и использовать эту функцию для отображения
3. Допустим, я собираюсь получить идентификатор и код активности из массива. Как я могу получить это с помощью функции карты.
4. или вы можете использовать состояние
Ответ №1:
Вы можете использовать useState, а затем сопоставить.
const [arr,setArr]=useState([]);
const getAllActivities = async () => {
const user = await JSON.parse(localStorage.getItem('user'));
const paramsData = {
_entity: 'ActivityTrack',
_select: '*',
channel: 'KOORS',
email: user amp;amp; user.data amp;amp; user.data.email ? user.data.email : ''
};
const res = await dispatch(getAllActivityDetails(paramsData));
setArr(res.data.data) //According to your response
И тогда вы можете использовать карту, как
arr?.map(//Your code)
И, судя по тому, как вы используете redux, вы можете напрямую хранить данные в хранилище. Я не знаю, как вы используете свой рабочий процесс
Комментарии:
1. Это может сработать. Однако мы знаем, что функция dispatch() вернет значение самого отправленного действия. Но, видя возвращенные данные, мы не видим простого объекта JS, который должен содержать свойства : тип и (дополнительную) полезную нагрузку. Вместо этого возвращаемое значение больше похоже на состояние хранилища. Интересно, как оригинальный плакат определял его действия в срезе, а также в магазине. Имо, это неправильный способ использования Redux.
2. Предполагается, что отправка сообщает магазину об обновлении его состояний, и нас на самом деле не волнует его возвращаемое значение, исходя из которого мы используем его для целей рендеринга. React-Redux предоставляет метод useSelector, который мы можем использовать для получения данных/состояния из хранилища для рендеринга нашего компонента. Я предлагаю оригинальному плакату прочитать официальный обучающий документ Redux из части 1 : redux.js.org/tutorials/essentials/part-1-overview-concepts , через все части учебника, чтобы правильно использовать редактирование. Команда Redux также рекомендует использовать наборы инструментов Redux для упрощения кодирования, что также описано в учебных пособиях.
3. Я также не знаю, как оп управлял своим рабочим процессом. Но вы можете увидеть консоль op. войдите, и это даст ему нужные предметы. Я также упомянул его, что это неправильный способ сделать это
4. Предполагая, что данные его хранилища отображаются как в переменной с именем res, содержащей свойство вложенного массива, а именно res.data.data. Затем просто импортируйте элемент выбора пользователей из React-Redux; поэтому мы можем использовать метод выбора пользователей следующим образом : const res = Элемент выбора пользователей(состояние => состояние.данные.данные). Этот код должен располагаться на верхнем уровне его функционального компонента. Нет необходимости возвращать значение из метода dispatch (). Каждый раз при отправке действия запускается метод useSelector() для проверки обновлений, чтобы определить повторную визуализацию. Следовательно, он может просто использовать эту переменную res при рендеринге таблицы.
5. Мы не видели его полного кода. Мы не знаем, как он управлял своим магазином. Я знаю, что действие диспетчеризации обновит состояние в глобальном хранилище. Исходя из этого поста, я предположил, что у op недостаточно знаний о редактировании, и это рабочий процесс
Ответ №2:
Вы должны сначала разместить функцию, а затем эффект использования. Кстати, когда вы вызываете getAllActivities в этом эффекте использования, вы сохраняете данные в redux? если это так, вы можете использовать эти данные для сопоставления, если нет, вам нужно сохранить эти данные в состоянии, а затем сопоставить их. Я не уверен, что понимаю, что вам нужно
Комментарии:
1. Вы имеете в виду создать
const [log, setLog] = useState([]);иsetLog(reg)внутри getAllActivity, а затем использовать log.map() ? Но это отображается как log.map не является функцией
Ответ №3:
Предполагая, что мы можем принять ваш рабочий процесс как есть, в котором вы используете данные только для этого компонента, тогда один из способов решить вашу проблему без необходимости дополнительного локального состояния-использовать useRef() : useRef hook.
useRef используется не только для доступа к DOM, но также может использоваться как переменная/поле экземпляра в компоненте класса. Смотрите : Есть ли что-то вроде переменных экземпляра в крючках ?
Поместите следующее на верхний уровень вашего компонента :
const resref = useRef({}); // the variable name can be any valid name
затем в вашей функции getAllActivities назначьте значение res для resref.current следующим образом :
const res = await dispatch(getAllActivityDetails(paramsData));
resref.current = res;
или вы можете просто написать так :
resref.current = await dispatch(getAllActivityDetails(paramsData));
В вашей визуализации таблицы замените :
res.data.data
с
resref.current.data.data