useEffect 在 axios 调用中始终不返回任何内容

Question

I've been trying to look for an answer everywhere but this is really driving me crazy. Been using StackOverflow for a while, yet this became my first question.

I'm trying to build a dynamic table using react. For this, I am passing the state using the useState hook to an external component -which actually builds the table- through its props. The reason not to build it on the same component is that I'm re-using the external component.

So far, this is the code where the hooks are being used

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>
  )
}

And this is the code where the data is used, although I think it should be unrelated.

CommandsTable.js

// ...
<tbody>
          {
            props.data.map(command => {
              <tr key={command._id}>
                <td>{command.name}</td>
                <td>{command.ret}</td>
                // etc
              </tr>
            })
          }
</tbody>
//...

The problem : data always comes out not as undefined, but as empty (I assume it's the [] initial value I assign with useState )

One more thing I find funny is that even if I'm using axios-debug-log , it never logs any call, but using it anywhere else on the code, the same call works without issue.

What am I missing?

Thanks!

Answer 1

I'm assuming that the ret object is coming back as something you're not expecting.

I would suggest taking a peak at the ret variable when it arrives.

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>
  )
}

Answer 2

Figured it out thanks to @Ajay 's comment.

It was a CORS policy issue. This is what I've done to solve it.

Server side (express server) Install cors

npm i cors

Require and use it

const cors = require("cors")

app.use(cors())

Restart server, solved. Thanks guys!