#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);
этой строки и посмотрите, ожидаете ли вы этого.