时间戳

首页 > 解决方案 > useEffect 在 axios 调用中一直不返回任何内容

javascript - useEffect 在 axios 调用中一直不返回任何内容

问题描述

我一直试图到处寻找答案，但这真的让我发疯。使用 StackOverflow 有一段时间了，但这成为我的第一个问题。

我正在尝试使用 react 构建一个动态表。为此，我使用useState钩子将状态传递给外部组件 - 它实际上构建了表格 - 通过它的道具。不在同一个组件上构建它的原因是我正在重用外部组件。

到目前为止，这是使用钩子的代码

命令.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，它也不会记录任何调用，但是在代码的其他任何地方使用它，相同的调用也不会出现问题。

我错过了什么？

谢谢！

标签： javascriptreactjsaxiosuse-effectuse-state

解决方案

我假设该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>
  )
}

推荐阅读