时间戳

首页 > 解决方案 > 未定义的值。尝试使用 fetch 设置 ID

javascript - 未定义的值。尝试使用 fetch 设置 ID

问题描述

我可以通过 API 直接访问数据，并且可以让 onClick 显示数据，这样我就知道它触发了。获取失败，因为 Id 未定义但是我无法弄清楚为什么 id 从未定义。

代码：

import React from 'react';
import Film from './Film.js';


class Actor extends React.Component {

 state = {
    display:false, 
    data:[],
  }

 loadFilmDetails = () => {
   const url = "http://localhost/c/api/films?actor_id=" + this.props.details.actor_id
   fetch(url)
     .then( (response) => response.json() )
     .then( (data) => {
       this.setState({data:data.data})
     })
      .catch ((err) => {
        console.log("something went wrong ", err)
     }
   );
 }

 handleActorClick = (e) => {
   this.setState({display:!this.state.display})
   this.loadFilmDetails()
 }

 render() {

   let films = ""
   if (this.state.display) {
     films = this.state.data.map( (details, i) => (<Film key={i} details={details} />) )
   }

   return (
     <div>
       <h2 onClick={this.handleActorClick}>{this.props.details.first_name} {this.props.details.last_name}</h2>
       {films}
     </div>
   );
 }
}

export default Actor;

如果我这样做，console.log(this.prop.details)我会得到一个包含一些数据但没有 actor_id 的对象。

我如何做到这一点，以便const url = "http://localhost/a/api/films?actor_id=" + this.props.details.actor_id实际为 actor_id 设置一个值（当前始终未定义）。

标签： javascriptreactjsfetch

解决方案

可能有两个问题：

  1. 要么您没有正确地将道具details.actor_id从父级传递到Actor组件。

  2. 或者 Actor 组件在props可用之前已经渲染，这就是您获得undefined.

如果是第二种情况。然后，您必须在拨打电话之前先使用附加检查fetch。

尝试此代码更改，一次或分享您的代码和框链接（让我们看看发生了什么）

 handleActorClick = (e) => {
   this.setState({display:!this.state.display});
   this.props.details.actor_id && this.loadFilmDetails();
 }

推荐阅读