Question

在使用 Reactjs 的项目的组件中渲染道具时遇到一些问题。信息显示在反应开发工具的道具中，但我无法在浏览器上呈现它们。控制台记录时，没有显示值... 我想知道我是否需要更深入地研究 api 以获取我需要的东西？

CocktailRecipe.js

````import React, { Component } from 'react'
// import Spinner from '../layout/Spinner'

class CocktailRecipe extends Component {
    componentDidMount(){
        this.props.getCocktail(this.props.match.params.idDrink);
        // console.log(this.props.match.params.idDrink)
    }

    render() {
        const {strDrink} = this.props.cocktailrecipe;
        console.log(strDrink);
        // console.log(this.props.cocktailrecipe.strDrink);
        // const {loading} = this.props.loading;
        // if (loading) {
        //     <Spinner />
        // }else{
            return (
                <div>
            <h3>{strDrink}</h3>
                    <h3>This is the title</h3>
                </div>
            )
    //     }
    }
}

export default CocktailRecipe````

app.js

````import { Component, Fragment } from 'react';
import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import './App.css';
import Navbar from './layout/Navbar';
import CocktailList from './cocktail/CocktailList';
import axios from 'axios';
import Search from './cocktail/Search';
import Alert from './layout/Alert';
import About from './pages/About';
import CocktailRecipe from './cocktail/CocktailRecipe';

class App extends Component {
 
  state={
    cocktails: [],
    cocktailrecipe:{},
    loading: false,
    msg:'',
    type:''
  }

  async componentDidMount() {
    try {
      this.setState({loading: true})
    const res = await axios.get('https://www.thecocktaildb.com/api/json/v1/1/search.php?s=');
    // console.log(res.data);
    this.setState({cocktails: res.data.drinks, loading: false})
    } catch(error) {
      console.log(error)
    }
    
  }

  handleSearchCocktails= async (text) => {
    try{
    const res = await axios.get(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${text}`);
    // console.log(res.data);
    this.setState({cocktails: res.data.drinks, loading: false})
  } catch(error) {
    console.log(error)
  }
  }

  // Get cocktail recipe
  getCocktail = async (idDrink) => {
    try {
    const res = await axios.get(`https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${idDrink}`);
    // console.log(res.data.drinks);
    this.setState({cocktailrecipe: res.data.drinks.id, loading: false})
  } catch(error) {
    console.log(error)
  }
  }

  handleClearCocktails= () => {
    this.setState({cocktails:[], loading: false})
  }

  handleSetAlert=(msgfromSearch, typefromSearch)=>{
    this.setState({ msg:msgfromSearch, type:typefromSearch })
    setTimeout(()=>this.setState({msg:'', type:''}), 5000)
  }

  render() {
    const {cocktails, loading, cocktailrecipe} = this.state;
    return (
      <Router>
        <div className="App">
          <Navbar title="COCKTAIL LIBRARY" />
          <div className="container">
          <Alert msg={this.state.msg} type={this.state.type} />
          <Switch>
            <Route exact path='/' render={props=>(
              <Fragment>
                <Search searchCocktails={this.handleSearchCocktails} clearCocktails={this.handleClearCocktails} showClear={this.state.cocktails.length>0?true:false} setAlert={this.handleSetAlert} />
                <CocktailList loading={loading} cocktails={cocktails}  />
              </Fragment>
            )} />
            <Route exact path='/about' component={About} />
            <Route exact path='/cocktailRecipe/:idDrink' render={props => (
              <CocktailRecipe {...props} getCocktail={this.getCocktail} cocktailrecipe={cocktailrecipe} loading={loading}/>
            )} />
          </Switch>
          </div>
        </div>
      </Router>
    );
  }
}

export default App;````

Answer 1

在您的屏幕截图中，props cocktailrecipe 是一个对象数组。

在 CocktailRecipe.js 上使用数组解构代替对象

- const {strDrink} = this.props.cocktailrecipe;
+ const [strDrink] = this.props.cocktailrecipe;

Answer 2

事实证明，我的 wifi 连接是问题的一部分。并且抓错了对象。

在 CocktailRecipe.js 中，我添加了：

第 22 行： const { 饮料 } = this.props.cocktailrecipe;

然后放入render()：

{drinks && Drinks[0].strDrink }

我听说这可能不是最优雅或最有效的解决方案，所以如果有人有更好的方法，请告诉我。

道具不渲染

2 个答案:

{drinks && Drinks[0].strDrink }