反应语法不起作用答案

【问题标题】：React syntax does not work反应语法不起作用
【发布时间】：2018-06-19 08:29:55
【问题描述】：

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 的元素。

【问题讨论】：

您是否从 API 获取餐厅数据？
是否有“未定义”条目或者你为什么要检查restaurant? ...
你说，this.state.restaurant，但你从restaurants 获取值
Bojan lvanac - 是的，我从 API 获取数据
lipp - 不，没有未定义的条目，但我只是检查了数据是否被正确读取

标签： javascript node.js reactjs syntax

【解决方案1】：

componentDidMount 在第一个 render 之后调用。因此，在处理第一个 render 时，您的 restaurants 未定义。

可以检查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>
        );
    }
}

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

【讨论】：

你说得对，我也注意到了，但我不知道在第一次渲染之前如何放置数据。
我也尝试过componentWillMount，但不起作用..:(我不知道该怎么办
组件初始化前不需要放数据。如果数据不存在，您可以不渲染任何内容或加载器微调器。
componentWillMount 是不推荐使用的方法。并且渲染不会等待数据获取或任何其他异步操作
没关系的天才，它实际上可以工作，因为我使用 null 而不是我以前使用的空数组。非常感谢。

【解决方案2】：

问题可能出在您从状态中声明餐厅常量的位置。我编写了一个示例代码，可以在下面运行。

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;

【讨论】：