UseEffect() не видит изменений в объекте Array
const [entries, setEntries] = useState([])
useEffect(() => {
let active = true
if (active) {
divisions.forEach((division) => {
let teams = []
let tempDivision = division
db.collection(`${division.ref}/teams`).get().then((docs) => {
docs.forEach((doc, index) => {
teams.push(doc.data())
})
tempDivision['teams'] = teams
})
setEntries(oldArray => [...oldArray, tempDivision])
})
}
return () => {
active = false;
};
}, [divisions]);
Я хочу получить обновление setEntries и повторно отобразить внешний интерфейс. В настоящее время entries обновляется с помощью useEffect(), но не вызывает повторный рендеринг. Так что в этом случае рендерится только то, что находится в инициализаторе useState([])
РЕДАКТИРОВАТЬ 1 Это еще один способ, которым я пытаюсь «смотреть» массив, записи, чтобы состояние можно было повторно отобразить, но я все еще не добился успеха.
export const TeamsTable = ({event, divisions}) => {
const [entries, setEntries] = useState(divisions)
useEffect(() => {
let active = true
if (active) {
entries.map((division, index) => {
let teams = []
db.collection(`${division.ref}/teams`).get().then((docs) => {
console.info("Tests")
docs.forEach((doc, index) => {
teams.push(doc.data())
})
entries[index]['teams'] = teams
})
})
setEntries(entries)
}
return () => {
active = false;
};
}, [entries]);
return (
<MuiThemeProvider theme = {theme}>
{ entries.map((division, index) => {
return <MUIDataTable
title = {<Typography style = {{fontWeight: 'bold'}}>{division.name.toUpperCase()}</Typography>}
data = {division.teams}
columns = {columns}
options = {options}
style = {{marginBottom: 15}}
key = {index}
/>
})}
</MuiThemeProvider>
)
}
Divisions используется только для выполнения цикла forEach. Мне нужны данные из Entries.
Вы сказали, useEffect() is not seeing changes in Array object. Как вы уверены, что useEffect не видит изменения в объекте массива?
Ну, объект изменяется в конце useEffect(), но useEffect не перерисовывает внешний интерфейс. При выполнении console.info(entries) он показывает только данные, когда он был инициализирован с использованием useState([]), что в данном случае является пустым массивом
@gmnoob temp никогда не используется ... он только инициализируется пустым массивом.
@NileshPatel хороший звонок, это был старый код, я внес изменения
попробуйте удалить [divisions] в конце useEffect()
@theTradeCoder Я попробовал это, и вы, вероятно, уже знаете, что это выдаст предупреждение об отсутствии зависимости
@gmnoob будут ли записи содержать список команд? вы получаете данные всех команд ??
удалено включая []?
@theTradeCoder, удаление включенных []результатов в бесконечный цикл. @NileshPetal entries будет хранить информацию о дивизионе и набор команд, участвующих в этом дивизионе. { teamName, createdBy, teams: [{team1}, team{2}, ...]}
Ну, в этом случае вам может понадобиться изменить коды внутри себя, потому что этот массив зависимостей в конце useEffect(), useEffect() будет вызываться только один раз, так что таким образом - я думаю, это вам не даст любые измененные/обновленные данные, если вы не обновите страницу
Я ценю эту идею, но как вы предлагаете изменить коды внутри? @theTradeCoder
Можете ли вы console.info записи за пределами вашего useEffect? Пока ваш db.collection возвращает некоторые значения, кажется, что он устанавливает его правильно. Возможно, значения установлены, но не отображаются правильно? Еще одна проверка, которую я бы сделал, — убедиться, что вы действительно получаете какие-либо данные из db.collection. Потому что, если это пусто, тогда ваш метод set все равно установит его в пустой массив
@szczocik подтверждено, что я получаю данные от db.collection. Проблема в том, что это не повторный рендеринг (что-то близкое к тому, что вы сказали, «не правильно отображается»)
Я сделал редактирование с другим подходом, наблюдая за прикреплением в useEffect(), но я все еще не преуспел в этом.
Ответы 1
После нескольких часов просмотра кодов и исследований я совершил глупейшую ошибку новичка. Решение этой проблемы делает setEntries внутри метода Promise.
Спасибо всем за помощь!
Где вы обновляете разделы? Вы обновляете массив записей, используя setEntries.