Как отобразить асинхронный результат (массив) в компоненте в react?

#javascript #reactjs #map-function #asynchronous-javascript

#javascript #reactjs #map-функция #асинхронный-javascript

Вопрос:

Я занимаюсь js уже около месяца, и я пишу эту программу, в которой я использую clarifai API, чтобы увидеть, на какую знаменитость больше всего похож человек на фотографии.

Я хочу передать вывод в качестве реквизита компоненту Rank для его отображения, но я получаю

Ошибка типа: clarifaiResults.map не является функцией в App.transformResponse

По сути, ответ, который я хочу передать в качестве реквизита, — это та const clarifaiResults = response.outputs[0].data.regions[0].data.concepts[0].name; часть, которую я получаю в консоли.войдите сейчас

Я предполагаю, что это потому, что пока нет выходных данных, когда приложение пытается отобразить компонент, но я не могу понять, что не так с кодом. Спасибо!

App.js

 import React, { Component } from 'react';
import './App.css';
import SignIn from './Component/SignIn/SignIn.js';
import Register from './Component/Register/Register.js';
import Particles from 'react-particles-js';
import Logo from './Component/Logo/Logo.js';
import Navigation from './Component/Navi/Navigation.js';
import ImageLinkForm from './Component/Form/ImageLinkForm.js';
import Rank from './Component/Rank/Rank.js'
import Clarifai from 'clarifai';
import FaceRecognition from './Component/Face/FaceRecognition.js';
import FaceComparison from './Component/Comparison/FaceComparison.js';

const app = new Clarifai.App({
  apiKey: 'MYSUPERSECRETKEY'
});

const initialState = {
  input: "",
  imageUrl: "",
  results: [],
  route: "SignIn",
  user: {
    id: "",
    name: "",
    email: "",
    entries: 0,
    joined: "",
  },
};

const particleOptions = {
  particles: {
    number: {
      value: 40,
      density: {
        enable: true,
        value_area: 800,
      },

    }
      }
    }

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

    transformResponse = (response) => {
      const clarifaiResults = response.outputs[0].data.regions[0].data.concepts[0].name;
    
      const results = clarifaiResults.map((ingredient) => ({
        ingredients: ingredient.name,
        probablitiy: ingredient.value,
      }));

      this.setState({results: results.celebrityName});
    
      return {results: []};
    };

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

  }

  onSubmit = () => {
    this.setState({imageUrl: this.state.input});
    app.models
    .predict(
      Clarifai.CELEBRITY_MODEL,
      this.state.input)
      .then(response => {
        console.log(response.outputs[0].data.regions[0].data.concepts[0].name)
        if (response) {
          fetch ('http://loclhost:3000', {
            method: 'post',
            headers: {'Conent-Type' : 'application/json'},
            body: JSON.stringify({
              input: this.state.user.input
            })
          })
          .then((response) => response.json())
          .then(count => {
            this.setState(Object.assign(this.state.user, {entries:count}))
          })
        }
        this.transformResponse(response);
      })
      .catch(err => console.log(err));
        

      };  
         
      ;



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

  render() { 
    let { isSignedIn, imageUrl, route, results} = this.state;
    return (
      <div className="App">
            <Particles className='particles'
             params={particleOptions} 
             />
            <Navigation isSignedIn={isSignedIn} onRouteChange={this.onRouteChange}/>
            { route ==='home'  
              ? <div>
                  <Logo />
                  <Rank 
                   results = {results}/>
                  <ImageLinkForm 
                    onInputChange={this.onInputChange} 
                    onSubmit={this.onSubmit}
                    />
                    <FaceRecognition 
                    imageUrl={imageUrl}    
                  />
                  <FaceComparison 
                    results = {results}
                  />
                </div>
              : (
                    route === 'SignIn' 
                  ? <SignIn onRouteChange={this.onRouteChange}/>
                  : <Register />
              )
               
            }
      </div>
    );
  };
}

export default App;
 

Rank.js

     import React from 'react';

const Rank = ({results}) => {
const prediction = results.map((result) => {
const {ingredients}  = resu<
return (
    <div>
        <li className="celebrityName">{ingredients}</li>
    </div>
);
});

if (prediction amp;amp; prediction.length>1) {
    return (
         <div>
            <div className='white f3'>
                You look a lot like...
                </div>
            <div className='white f1'>
            {results}
            </div>
        </div>
        );
    } else {
        return (
            <div>
        
        </div>
        )
    }
};

export default Rank;
 

Комментарии:

1. Возможно, это просто опечатка в вашем фрагменте, поэтому она не решит вашу проблему, но, в App.js onSubmit , у вас есть fetch ('http://loclhost:3000' (отсутствует буква «а» в «localhost»).

2. @secan спасибо! проблему не решил, но спасибо, что заметили опечатку 🙂

3. разве вы не должны response.json() устанавливать в качестве параметра this.transformResponse(response); ?

4. @Anuja спасибо за ответ! Хм… Я не уверен. Не могли бы вы немного уточнить?

5. чуть console.log(response) выше this.transformResponse(response); этой строки и посмотрите, ожидаете ли вы этого.