Question

下午好，

我正在尝试显示在初始渲染之前由MongoDB实例提供给我的应用程序的数据。我成功地遇到了错误或警告。

这是我正在使用的render方法的一部分。

        <div className="right-column">
            <div className="pipeline">

              {this.props.tournamentList.map((x,i) => {
                return <li key={i}>{x.name}</li>
              })}

            </div>

        </div>

this.props.tournamentList具有一系列对象的值，如下所示：

tournamentList:
Array[15]
0:
{…}
1:
{…}
2:
{…} ...

此列表通过componentWillMount生命周期方法进入我的应用程序，因此在初始渲染之前。对我来说，我应该能够遍历数组并生成由我的数据库提供的动态生成的锦标赛列表。

然而，根据我提供的代码，我收到了这个警告：

Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {prelims, outRounds, notes}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of {BuildTournament {1}}

我尝试了这种方法，创建名为.并在div中使用“管道”类调用它，但没有任何反应，没有错误没有渲染：

displayTournaments

显然我做错了但我不知道是什么。这是一个我应该使用错误消息建议的键控片段的实例吗？比我更聪明的人愿意提供一些见解吗？

干杯。

Answer 1

更新：对不起，我误解了你的问题。 Kyle在加载状态下是正确的。

此外，使用像lodash这样的库可以让您以更自然的方式映射对象。原生的javascript map方法并不能很好地处理对象。

https://www.npmjs.com/package/lodash

你以同样的方式使用它。刚

import _ from lodash

然后

_.map(objectToMap, (x) => <Component key={x}>{x.thing}</Component>)

Answer 2

如果您在componentWillMount或componentDidMount生命周期挂钩中获取数据，则需要具有加载状态。以下示例将说明如何完成此操作。

class ComponentThatGetsAsyncData extends PureComponent {
    constructor( props ) {
        super( props );

        this.state = {
            tournamentList: [ ]
        }
    }

    componentDidMount() {
        // use any http library you choose
        axios.get( "/some_url" )
            .then( ( res ) => {
                // this will trigger a re-render
                this.setState({
                    tournamentList: res.data
                });
            })
            .catch( ( err ) => {
                // handle errors
            });
    }

    render() {
        const { tournamentList } = this.state;
        // i'd use something other than index for key

        // on your initial render your async data will not be available
        // so you give a loading indicator and when your http call
        // completes it will update state, triggering a re-render
        return (
            {
                tournamentList ?
                    tournamentList.map((x,i) => {
                        return <li key={i}>{x.name}</li>
                    }) :
                    <div className="loading">Loading...</div>
            }
        );
    }
}

Answer 3

这将是一个简单的解决方案，它将具有加载状态，错误状态和成功状态。

首先要注意的是，您需要对对象使用Object.keys()才能映射键数组，因为您无法映射普通对象。您还应该注意，地图将返回每个对象的键，因此为了定位键值对，您需要使用类似tournaments[key].name的语法，而不是仅仅执行tournament.name，因为您要定位在对象中对象，然后抓取值。

如果您需要更多帮助，请告诉我

import React from 'react'
import Loader from '../Loader'

const resultList = ({ tournaments, isFetching = true }) => (
<div>
    {
        isFetching
            ?   <div>
                    <Loader /><br />
                    <span>Loading&hellip;</span>
                </div>
            :   <div>
                    {
                        Object.keys(tournaments).length
                        ?   <div>
                                {
                                  tournaments.map((key) => (
                                        <section id={tournaments[key].id} key={key}>
                                            <p>{tournaments[key].name}</p>
                                        </section>
                                    ))
                                }
                            </div>
                        :   <div>
                                <p>There are no tournaments....</p>
                            </div>
                    }
                </div>
    }
</div>
);

export default resultList

渲染对象数组React

3 个答案: