Question

我正在尝试将JSON对象数组提取到我的react页面上。现在，我得到的数组是：

[{"_id":"5c4309fb643589310818165e","TableTime":"10:30- 11:00","TableType":"Pool Table 1","TableStatus":"Booked"}, {"_id":"5c430a3f2f788e322d2430d0","TableTime":"10:30- 11:00","TableType":"Pool Table 1","TableStatus":"Booked"}]

我首先通过result方法将其设置为状态变量componentDidMount()。在render方法中，当我这样做时：

    const { result } = this.state;
    var slot = result;    
    console.log(slot);

我得到上面的数组。但是当我这样做时：

    const { result } = this.state;
    var slot = result;    
    console.log(slot[0].TableTime);

我收到错误TypeError: Cannot read property 'TableTime' of undefined

我搜索并尝试了此链接，并使用了JSON.parse()：Access elements of json in an Array in jquery

但是它给了我错误：SyntaxError: Unexpected token u in JSON at position 0

相关代码如下：

 class Timeslots extends Component {
  constructor(props, context) {
  super(props, context);
  this.state = {
    result: [] 
 }

  componentDidMount() {
    this.getList();
  }

  getList = () => {

    fetch("/purchase")
    .then(res => res.json())
    .then(result => this.setState({ result }))
  }


  render() { 
    const { result } = this.state;
    var slot = result;    
    console.log(slot);
   );
  }
 }

 export default Timeslots;

我只想要一种方法来访问slot[0].TableTime并使用它？

Answer 1

首先，组件渲染。然后，您从fetch获得结果。因此，您应该在渲染中进行null检查。类似于返回结果！== null？ console.log（result）：null

也不需要slot变量。

如何在reactjs中访问JSON数组的元素？

1 个答案: