代码之家 › 专栏 › 技术社区 › Jay Jeong

React语法不起作用

syntax reactjs node.js javascript

Jay Jeong · 技术社区 · 7 年前

componentDidMount() {
    const restaurants = Restaurant.all()
    restaurants.then( rests => {
        this.setState({
            restaurants: rests
        })
    })
}


render() {
        const { restaurants } = this.state;

        return (
            <main className="SearchRestaurantsPage" style={{textAlign: 'center'}}>
                <Chosen className="Chosen-select" onChange={ value => console.log(value) }>
                    {    
                        restaurants.map( restaurant => {

                            return restaurant ?
                                ( <option key={restaurant.id}>{ restaurant.name }</option> )
                                :
                                ''
                        })
                    }
                </Chosen>
            </main>
        );
    }

[<option key={1}>first</option>, <option key={2}>two</option>, <option key={3}>three</option>]

render() {
        const { restaurants } = this.state;

        return (
            <main className="SearchRestaurantsPage" style={{textAlign: 'center'}}>
                <Chosen className="Chosen-select" onChange={ value => console.log(value) }>
                    {    
                         [<option key={1}>first</option>, <option key={2}>two</option>, <option key={3}>three</option>]
                    }
                </Chosen>
            </main>
        );
    }

2 回复 | 直到 7 年前

Nik 7 年前

componentDidMount render restaurants 提供

餐厅

componentDidMount() {
    const restaurants = Restaurant.all()
    restaurants.then( rests => {
        this.setState({
            restaurants: rests
        })
    })
}


render() {
        const { restaurants } = this.state;

        return (
            <main className="SearchRestaurantsPage" style={{textAlign: 'center'}}>
                <Chosen className="Chosen-select" onChange={ value => console.log(value) }>
                    {    
                        restaurants && restaurants.map( restaurant => {

                            return restaurant ?
                                ( <option key={restaurant.id}>{ restaurant.name }</option> )
                                :
                                null
                        })
                    }
                </Chosen>
            </main>
        );
    }

class Rests extends React.Component {    
    state = {restaurants: null};

    componentDidMount() {
        const restaurants = Restaurant.all()
        restaurants.then( rests => {
            this.setState({
                restaurants: rests
            })
        })
    }


    render() {
        const { restaurants } = this.state;

        if (!restaurants) {
           return null; // or you can return <LoadingSpinner /> here
        }

        return (
            <main className="SearchRestaurantsPage" style={{textAlign: 'center'}}>
                <Chosen className="Chosen-select" onChange={ value => console.log(value) }>
                    {    
                        restaurants.map( restaurant => {

                            return restaurant ?
                                ( <option key={restaurant.id}>{ restaurant.name }</option> )
                                :
                                null
                        })
                    }
                </Chosen>
            </main>
        );
    }
}

在上一个示例中,如果在 .获取数据后,我们重新发送组件并向用户显示选项

Kavindu Wijesuriya 7 年前

import React from 'react';

const restaurentData = [
  {
    id: 1,
    name: 'name 1'
  },
  {
    id: 2,
    name: 'name 2'
  },
  {
    id: 3,
    name: 'name 3'
  }
]
class Hello extends React.Component {
  constructor() {
    super();

    this.state = {
      restaurents: restaurentData
    }
  }

  render () {
    const restaurents = this.state.restaurents;
    return (
      <ul>
        {restaurents.map(restaurent => {
          return restaurent 
            ? (<li key={restaurent.id}>{`${restaurent.id} -- ${restaurent.name}`} </li>) 
            : null;
        })}
      </ul>
    )
  }
}

export default Hello;