Question

我试图通过axios库函数axios.get（）方法读取JSON数据。它工作正常并在控制台中记录正确的用户名并正确设置用户变量的状态。但是当我尝试渲染相同的对象时渲染方法（）它停止工作。链接到CODE on codepen。

class TableData extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users:[],
      count: 0
    };
  }
  componentDidMount() {
    axios
      .get(`https://fcctop100.herokuapp.com/api/fccusers/top/recent`)
      .then(response => {
        this.setState({ users: response.data });
        console.log(this.state.users[2].username);
      });
  }
  render() {
    return (
      <div>Hello {this.state.users[2].username}</div>
    );
  }
}
ReactDOM.render(<TableData />, document.getElementById("container"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.12.0/axios.min.js"></script>
<div class="container" id="container">

</div>

类型为

的JSON数据返回对象的URL

Object {
  alltime: 388,
  img: "https://avatars3.githubusercontent.com/u/36005?v=3",
  lastUpdate: "2017-10-17T08:05:51.276Z",
  recent: 124,
  username: "korzo"
}

请帮助我。

Answer 1

有一段时间，this.state.users是一个空数组。因此，当您的渲染函数访问this.state.users[2].username时，this.state.users [2]可以是未定义的，抛出异常。您只需更改渲染函数即可处理数组为空的情况。

还要注意this.setState可以是异步的，因此调用setState后的日志语句可能看不到新状态。如果要等到setState完成，可以将回调函数传递给this.setState

＆＃13;

class TableData extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users:[],
      count: 0
    };
  }
  componentDidMount() {
    axios
      .get(`https://fcctop100.herokuapp.com/api/fccusers/top/recent`)
      .then(response => {
        this.setState({ users: response.data }, function () {
          console.log(this.state.users[2].username);
        });
      });
  }
  render() {
    return (
      <div>Hello {this.state.users[2] && this.state.users[2].username}</div>
    );
  }
}
ReactDOM.render(<TableData />, document.getElementById("container"));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.12.0/axios.min.js"></script>
<div class="container" id="container">

</div>

＆＃13;

Answer 2

render方法尝试在组件装载时呈现this.state.users[2].username undefined。

你的render方法应该是这样的，只有当this.state.users数组有2个或更多元素时才能呈现。

render() {
  return this.state.users.length > 1 ? (
    <div>Hello {this.state.users[2].username}</div>
  ) : null;
}

另外，我不这么认为 console.log(this.state.users[2].username);应返回正确的数据，因为setState是异步的。

通过axios库方法设置状态后，Json Data无法在ReactJS类中呈现？

2 个答案: