Question

在我的应用程序中，用户粘贴图像URL，单击按钮，应用程序请求有关图片的API信息。该API以我要在浏览器中显示的信息数组作为响应。我收到响应（可以通过console.log确认），但是找不到显示它的最佳方法。我在考虑IngredientsList的另一个组件文件。

有什么能让我朝着正确的方向前进吗？

预先感谢

APP.JS

import React, { Component } from 'react'
import Clarifai from 'clarifai'
import Navigation from './components/Navigation/Navigation'
import FoodRecognition from './components/Food_recognition/Food_recognition'
import Logo from './components/Logo/Logo'
import IngredientsList from './components/IngredientsList/IngredientsList'
import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm'
import Signin from './components/Signin/Signin'
import Register from './components/Register/Register'
import './App.css'

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


class App extends Component {
  constructor()  {
    super()
    this.state = {
      input: '',
      imageUrl: '',
      route: 'signin',
      isSignedIn: false
    }
  }

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

  }

  onButtonSubmit = () => {
    this.setState({imageUrl: this.state.input})
    app.models
    .predict( 
      Clarifai.FOOD_MODEL,
      this.state.input)
      .then(
    function(response) {
      console.log(response)
    },
    function(err) {
    }
  );
  }

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

  render() { 
    const { isSignedIn, imageUrl, route } = this.state
    return (
      <div className="App">
        <Navigation isSignedIn={this.state.isSignedIn}onRouteChange={this.onRouteChange} />
        {route === 'home'
          ? <div>
            <Logo />
            <IngredientsList />
            <ImageLinkForm
              onInputChange={this.onInputChange}
              onButtonSubmit={this.onButtonSubmit} />
            <FoodRecognition imageUrl={imageUrl} />
          </div>
          : (
            route === 'signin'
              ? <Signin onRouteChange={this.onRouteChange} />
              : <Register onRouteChange={this.onRouteChange} />
          )
        }
      </div>
    );
  }
}

export default App;

Answer 1

常规方法是在得到您的回复后，将其设置为您的状态。您可以将此响应传递给所需的组件。

在下面的代码中，我刚刚添加了一个名为resposne的state属性，然后在您的访存方法中，使用响应设置了状态，然后将该状态传递给render方法中的组件。在第一个渲染中，response值将是一个空数组，在获取并更新状态后，它将把实际数据传递给第二个渲染中的组件。

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


class App extends Component {
  constructor()  {
    super()
    this.state = {
      input: '',
      imageUrl: '',
      route: 'signin',
      isSignedIn: false,
      response: [],
    }
  }

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

  }

  onButtonSubmit = () => {
    this.setState({imageUrl: this.state.input})
    app.models
    .predict( 
      Clarifai.FOOD_MODEL,
      this.state.input)
      .then( response => this.setState( {response } ) );
  }

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

  render() { 
    const { isSignedIn, imageUrl, route } = this.state
    return (
      <div className="App">
        <Navigation isSignedIn={this.state.isSignedIn}onRouteChange={this.onRouteChange} />
        {route === 'home'
          ? <div>
            <Logo />
            <IngredientsList response={this.state.response} />
            <ImageLinkForm
              onInputChange={this.onInputChange}
              onButtonSubmit={this.onButtonSubmit} />
            <FoodRecognition imageUrl={imageUrl} />
          </div>
          : (
            route === 'signin'
              ? <Signin onRouteChange={this.onRouteChange} />
              : <Register onRouteChange={this.onRouteChange} />
          )
        }
      </div>
    );
  }
}

评论后更新

映射数据是最简单的部分。

const App = props => {
  function renderData() {
    return props.data.map(item =>
      <div key={item.id}>
        <p>Name: {item.name}</p>
        <p>Age: {item.age} </p>
      </div>
    )
  }
  
  return (
    <div>{renderData()}</div>
  );
}

const data = [
  { id: 1, name: "foo", age: 25 },
  { id: 2, name: "bar", age: 35 },
  { id: 3, name: "baz", age: 45 },
]

ReactDOM.render(<App data={data} />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

显示API响应-React JS

1 个答案: