Question

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>
        );
    }

但无论我使用map方法做什么，它都不会显示任何内容。我已经检查过有一个数组，其中包含分配给this.state.restaurant的元素。

Answer 1

在第一个componentDidMount之后调用

render。因此，在处理完第一个restaurants时，render未定义。

您可以检查渲染方法中是否存在restaurants：

＆＃13;

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>
        );
    }

＆＃13;

另外，检查您的状态是在构造函数中定义还是作为class属性定义。

所以整个组件可以如下：

＆＃13;

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>
        );
    }
}

＆＃13;

在最后一个例子中，如果restaurants中没有任何数据，我们就不会渲染任何内容。获取数据后，我们重新呈现组件并向用户显示选项

Answer 2

问题可能是您从状态声明了restaurent常量。我已经编写了一个可在下面运行的示例代码。

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;

React语法不起作用

2 个答案: