javascript - React语法不起作用

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

最佳答案

在第一个componentDidMount之后调用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属性定义。

因此，整个组件可能如下：

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中没有任何数据，我们什么也不渲染。提取数据后，我们重新呈现组件并向用户显示选项