在工作之前出現錯誤“無法讀取未定義的屬性（讀取‘0’）”

Question

大約一個月前，我部署了 React 應用程序，前端在 github，后端和數據庫在 heroku（從 udemy 零到精通的“smartbrain”項目）。 到目前為止一切正常。 大約六天前，我檢查了 stil 是否正常工作，一切都很完美。 10 小時前，我收到了一個 email，其中包含后端服務器上關於 knex 2.3.0 的信息，存在安全問題，我需要更新到 2.4.0，我做到了，我檢查了此過程后它是否有效，但已經出現錯誤。 然后我再次降級 knex，但仍然是同樣的錯誤。 我也從課程中檢查了我老師的代碼，也有同樣的問題。 有人知道會發生什么嗎？

該應用程序正在連接到 Clarifai 人臉檢測 Api。

錯誤：TypeError：無法在 App.js:92:1 的 App.calcFaceLocation (App.js:47:1) 處讀取未定義的屬性（讀取“0”）

import { Component } from 'react';
import Navigation from './Components/Navigation/Navigation';
import SignIn from './Components/SignIn/SignIn';
import Register from './Components/Register/Register';
import Logo from './Components/Logo/Logo'
import ImgLinkForm from './Components/ImgLinkForm/ImgLinkForm';
import FaceRecognition from './Components/FaceRecognition/FaceRecognition';
import Rank from './Components/Rank/Rank';
import Particles from './Components/Particles/Particles';
import './App.css';


const initialState = {
  input: '',
  imageUrl:'',
  box:{},
  route:'signin',
  isSignedIn: false,
  user: {
    id: '',
    name: '',
    email: '',
    entries: 0,
    joined: ''
  }
}

class App extends Component {
  constructor(){
    super();
    this.state = initialState;
  }

  loadUser = (data) => {
    this.setState({user: {
      id: data.id,
      name: data.name,
      email: data.email,
      entries: data.entries,
      joined: data.joined
    }})
  }
  
  calcFaceLocation = (data) => {
    const clarifaiFace = data.outputs[0].data.regions[0].region_info.bounding_box;
    const image = document.getElementById('inputimage');
    const width = Number(image.width);
    const height = Number(image.height);
    return {
      leftCol: clarifaiFace.left_col * width,
      topRow: clarifaiFace.top_row * height,
      rightCol: width - (clarifaiFace.right_col * width),
      bottomRow: height - (clarifaiFace.bottom_row * height)
    }
  }

  dispFaceBox = (box) => {
    this.setState({box: box})
  }

  onInputChange = (e) => {
    this.setState({input: e.target.value})
  }

  onPictureSubmit = () => {
    this.setState({imageUrl: this.state.input});
    fetch('https://smart-brain-api-db.herokuapp.com/imageurl', {
      method: 'post',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        input: this.state.input
      })
    })
    .then(response => response.json())
    .then(response => {
      if(response) {
        fetch('https://smart-brain-api-db.herokuapp.com/image',{
          method: 'put',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            id: this.state.user.id
          })
        })
        .then(response => response.json())
        .then(count => {
          this.setState(Object.assign(this.state.user, { entries: count }))
        })
        .catch(console.log)
      }
      this.dispFaceBox(this.calcFaceLocation(response))
    })
    .catch(err => console.log(err));
  }

  onRouteChange = (route) => {
    if (route === 'signout') {
      this.setState(initialState)
    } else if (route === 'home') {
      this.setState({isSignedIn: true})
    }
    this.setState({route: route})
  }

  render() {
    const { isSignedIn, imageUrl, route, box } = this.state;
    return (
      <div className="App">
        <div className="particles">
          <Particles />
        </div>
        <Navigation isSignedIn={isSignedIn} onRouteChange={this.onRouteChange}/>
        { route === 'home'
        ? <div> 
        <Logo />
        <Rank name={this.state.user.name} entries={this.state.user.entries}/>
        <ImgLinkForm onInputChange={this.onInputChange} onPictureSubmit={this.onPictureSubmit}/>
        <FaceRecognition box={box} imageUrl={imageUrl}/>
      </div>
        : ( 
        route === 'signin'
        ? <SignIn loadUser={this.loadUser} onRouteChange={this.onRouteChange}/>
        : <Register loadUser={this.loadUser} onRouteChange={this.onRouteChange} />
          )
        }
      </div>
    );
  }
}

export default App;

大約 6 小時我使用了我在谷歌上找到的所有解決方案，但沒有效果。 即使我沒有找到任何類似的東西。 如果我需要上傳更多文件，請寫信給我，我會做的。

Answer 1

這個問題似乎不是與您實施 Clarifai API 相關的問題。要修復此類錯誤，您可能需要在訪問該屬性之前檢查該值是否未定義。