REACT Компонент не возвращает данные топора ios

Question

Я новичок в РЕАГИРОВАНИИ и изучаю тонну. Я пытаюсь извлечь свои данные из списка SharePoint и отобразить их на странице в виде таблицы, но когда я делаю вызов ax ios, я получаю следующую ошибку. tblData is undefined Я знаю, почему я получаю ошибку, и это потому, что this в топоре ios отличается от внешней стороны, поэтому я превратил его в функцию стрелки, и она все еще не работала. Затем я назначил внешний this переменной и использовал его в области видимости ios, но это все равно не сработало. Пожалуйста, помогите с !!

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), я получаю

Answer 1

Основы

Сначала вы должны понять основы React и, следовательно, функциональные компоненты - это не просто обычные функции, в которых вы можете изменять область видимости this, и она будет магически доступна в методах рендеринга.

React работает против виртуального DOM, и анализ выполняется, когда это необходимо (когда состояние изменяется), но состояние! == это.

Подробнее о жизненном цикле компонентов здесь https://reactjs.org/docs/state-and-lifecycle.html

Почему работает коды и поле

В ваших комментариях вы указали https://codesandbox.io/s/render-styled-table-with-data-iou7k?file= / components / App. js, который работает и работает по простой причине Нет другого жизненного цикла компонента. Данные имеют статус c и не асинхронны, и при первом рендеринге они работают с this.

Однако, когда вы извлекаете данные из API, вы делаете асинхронный код с помощью обещаний https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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 && ) оценивается как ложное, что ничего не рендерит.
2. Компонент будет монтироваться и с помощью React.useEffect мы запустим загрузку данных https://reactjs.org/docs/hooks-effect.html
3. Мы установим состояние компонента с помощью setData, что вызовет согласование реакции и повторный рендеринг, и будет доступен data.