时间戳

首页 > 解决方案 > REACT 组件不返回 axios 数据

reactjs - REACT 组件不返回 axios 数据

问题描述

我是 REACT 新手，学习了很多。我正在尝试从 SharePoint 列表中检索数据并将其作为表格呈现到页面，但是当我进行 axios 调用时，出现以下错误。tblData is undefined 我知道为什么会报错，是因为thisaxios里面的和外面的不一样，所以我把它变成了箭头函数，还是不行。然后我将外部分配this给一个变量并在 axios 范围内使用它，但这仍然不起作用。请帮忙！！

function Table(props) {

  return (
    <tr>
        <td>{props.title}</td>
        <td>{props.fname}</td>
        <td>{props.lname}</td>
        <td>{props.phone}</td>
        <td>{props.age}</td>
    </tr>
   )

 }

function App() {
  var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('Axios List')/items";
  var tbl = this;
  axios.get(endPointUrl).then(response => {
    tbl.tblData = response.data.value.map(function (data) {
        return (
            <Table
                title={data.Title}
                fname={data.FirstName}
                lname={data.LastName}
                phone={data.Phone}
                age={data.age}
            />
        )
    })
 })
  return (
    { tblData }
 )
}

ReactDOM.render(
  <App />,
  document.getElementById("app")
)

任何帮助将非常感激。

当我 console.log(response.data.value) 时，我得到 在此处输入图像描述

标签： reactjssharepoint

解决方案

基础知识

首先，您应该了解 React 的基础知识，因此函数式组件不仅仅是您可以改变this作用域的普通函数，而且它将神奇地在渲染方法中可用。

React 对虚拟 DOM 进行操作，并且在需要时（当状态更改时）进行比较，但状态！== this。

有关组件生命周期的更多信息，请参见 https://reactjs.org/docs/state-and-lifecycle.html

为什么codeandbox有效

在您的评论中，您链接了https://codesandbox.io/s/render-styled-table-with-data-iou7k?file=/components/App.js哪个有效，并且由于简单的原因而有效，没有另一个组件的生命周期。数据是静态的而不是异步的，在第一次渲染时它使用this.

但是，当您从 API 获取数据时，您正在通过 Promise https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise制作异步代码

当您使用 Promise 时，需要“通知”反应组件它应该重新渲染 DOM

解决方案——使用组件状态（钩子）

function Table(props) {

  return (
    <tr>
        <td>{props.title}</td>
        <td>{props.fname}</td>
        <td>{props.lname}</td>
        <td>{props.phone}</td>
        <td>{props.age}</td>
    </tr>
   )

 }

function App() {
  const [data, setData] = React.useState()

  var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('Axios List')/items"

  React.useEffect(() => {
    axios.get(endPointUrl).then(response => setData(response.data))
  }, [])

  return (
    <React.Fragment>
      {data && data.value.map(_data => (
        <Table
                title={_data.Title}
                fname={_data.FirstName}
                lname={_data.LastName}
                phone={_data.Phone}
                age={_data.age}
            />
       )}
    </React.Fragment>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById("app")
)

解释

现在您的组件将进入几个生命周期状态：

  1. 第一次渲染将使用未定义的数据，并且return ( data && )条件将评估为 false，这将不会渲染任何内容。
  2. 组件将挂载并通过使用React.useEffect我们将触发数据加载https://reactjs.org/docs/hooks-effect.html
  3. 我们将设置组件状态，setData该状态将触发反应协调和重新渲染，并且data可以访问。

推荐阅读