#javascript #reactjs #axios #use-effect #use-state
#javascript #reactjs #axios #use-effect #use-state
Вопрос:
Я пытался везде искать ответ, но это действительно сводит меня с ума. Некоторое время использовал StackOverflow, но это стало моим первым вопросом.
Я пытаюсь создать динамическую таблицу с помощью react. Для этого я передаю состояние с помощью useState
перехвата внешнему компоненту, который фактически создает таблицу, через ее реквизиты. Причина не создавать его на том же компоненте заключается в том, что я повторно использую внешний компонент.
Пока что это код, в котором используются перехваты
Commands.js
export default function Commands() {
const [data, setData] = useState([])
const fetchData = () => {
axios.get(`${server}${endpoint}`).then(ret => {
setData(ret.data)
}).catch(e => {console.log(e)})
}
useEffect(() => {
fetchData()
}, [])
return (
<Container>
<CommandsTable data={data}/>
</Container>
)
}
И это код, в котором используются данные, хотя я думаю, что это не должно быть связано.
CommandsTable.js
// ...
<tbody>
{
props.data.map(command => {
<tr key={command._id}>
<td>{command.name}</td>
<td>{command.ret}</td>
// etc
</tr>
})
}
</tbody>
//...
Проблема: data
всегда получается не как неопределенное, а как пустое (я предполагаю, что это []
начальное значение, которое я присваиваю useState
)
Еще одна вещь, которую я нахожу забавной, заключается в том, что даже если я использую axios-debug-log
, он никогда не регистрирует ни один вызов, но используя его в любом другом месте кода, тот же вызов работает без проблем.
Чего мне не хватает?
Спасибо!
Комментарии:
1. Каков ваш код ответа на инициализированный запрос axios http?
2. 200 при выполнении вызова axios в другом месте в качестве теста. Однако журнал отладки не отображается при выполнении вызова
useEffect()
.3. поместите журнал для
ret
, что это вам дает?4. Эй, @blossom, ты можешь показать нам маршрут, по которому пытаешься пройти? Существует также вероятность того, что в вашей базе данных еще ничего нет
5. Как насчет сетевой консоли браузера? Вы сможете увидеть точный предварительный просмотр ответа там
Ответ №1:
Я предполагаю, что ret
объект возвращается как нечто, чего вы не ожидаете.
Я бы предложил взять пик в ret
переменной, когда она прибудет.
export default function Commands() {
const [data, setData] = useState([])
const fetchData = () => {
axios.get(`${server}${endpoint}`).then(ret => {
console.log({ ret })
setData(ret.data)
}).catch(e => {console.log(e)})
}
useEffect(() => {
fetchData()
}, [])
return (
<Container>
<CommandsTable data={data}/>
</Container>
)
}
Ответ №2:
Понял это благодаря комментарию @Ajay.
Это была проблема политики CORS. Это то, что я сделал, чтобы решить эту проблему.
На стороне сервера (экспресс-сервер) устанавливается cors
npm i cors
Требовать и использовать его
const cors = require("cors")
app.use(cors())
Перезапустить сервер, решено.
Спасибо, ребята!
Комментарии:
1. Это должно было привести к ошибке CORS в консоли, о которой вы нигде не упоминали
2. Да, вот почему я упоминаю @Ajay, который сказал мне заглянуть в консоль браузера. Я смотрел на стандартный CLI, и ничего не регистрировалось.
3. Хорошо, не беспокойтесь. Хорошо, что вы смогли решить свою проблему, не тратя много времени. Просто чтобы уточнить, я думаю, что @Ajay, вероятно, упоминал вкладку network в инструментах разработки