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并且永远不会执行。

如果您是，那么您可能会检查数据引用是否实际发生了变化，或者您只是在改变对象的内部。

componentDidUpdate（）主要工作，但不渲染新数据

1 个答案: