componentDidUpdate() работает в основном, но не отображает новые данные

Question

Я использую метод componentDidUpdate() и по большей части он делает то, что должен. Он запускает функцию для получения данных из API, а также записывает их на консоль. Проблема в том, что он не рендерит новые данные на интерфейс. Единственный раз, когда он отображает новые данные, это если компонент действительно монтируется (если страница обновляется). Я чувствую, что я очень близко, но зашел в тупик. Вот мой код:

import React from 'react';
import Nav from './Nav';

class List extends React.Component {
constructor(props) {
super(props);
this.state = {
  APIData: []
}
}

getAPIData() {
const url = `http://localhost:3001${this.props.location.pathname}`;
return fetch(url, {
  method: 'GET',
  mode: 'CORS',
  headers: {
    'Accept': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
    return data;
  }).catch(err => { console.log('Error: ', err) });
};

dataList() {
return (
  <div>
  {this.state.APIData.map((APIData) => (
    <p> And the data returned is -> {APIData.firstName} 
{APIData.lastName} !</p>
  )
  )}
  </div>
) 
}

componentDidMount() {
console.log(this.props.location.pathname);

this.getAPIData()
  .then(data => {
    console.log('in List.js ', data);
    this.setState({
      APIData: data
    });
  });
}

componentDidUpdate(prevProps, prevState) {
console.log(this.props.location.pathname);
// only update if the data has changed
this.getAPIData()
.then(data => {
  if (prevProps.data !== this.props.data) {
    this.setState({
      APIData: data
    });
  }
  console.log(data);
});
}

render() {
return (
  <div>
    <Nav />
    <br />
    <br />
    <br />
    <br />
    <div>
      {/* {this.state.APIData.map((APIData) => (
        <p> And the data returned is -> {APIData.firstName} 
 {APIData.lastName} !</p>
      )
      )} */}
      {this.dataList()}

    </div>

  </div>
 );
 }
 }



 export default List;

Answer 1

Я думаю, что это может быть этот блок:

if (prevProps.data !== this.props.data) {
  this.setState({
    APIData: data
  });
}

Вы действительно передаете data опора для этого компонента?

Если нет, то это будет проверка, если undefined ==! undefined и никогда не выполняется.

Если да, то вы можете проверить, действительно ли изменяется ссылка на данные, или вы просто изменяете внутреннюю часть объекта.