useEffect ничего не возвращает при вызове axios

#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 в инструментах разработки