Как зацикливать объект в Реаге?

Новое для реагирования и попытки зацикливания атрибутов Object, но React жалуется на то, что объекты не являются допустимыми. Реагируйте на детей, может кто-нибудь, пожалуйста, дайте мне несколько советов о том, как решить эту проблему? Я добавил createFragment, но не совсем уверен, куда это нужно пойти или какой подход я должен предпринять?

var tifs = {1: 'Joe', 2: 'Jane'};
var tifOptions = Object.keys(tifs).forEach(function(key) {
    return <option value={key}>{tifs[key]}</option>
});

Функция рендеринга

render() {
        const model = this.props.model;

        let tifOptions = {};

        if(model.get('tifs')) {
            tifOptions = Object.keys(this.props.model.get('tifs')).forEach(function(key) {
                return <option value={key}>{this.props.model.get('tifs')[key]}</option>
            });
        }

        return (
            <div class={cellClasses}>

                    <div class="grid__col-5 text--center grid__col--bleed">
                        <h5 class="flush text--uppercase">TIF</h5>
                        <select id="tif" name="tif" onChange={this.handleChange}>
                            {tifOptions}
                        </select>
                    </div>

            </div>
        );
    }

Ошибка в консоли

If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object)

Ответ 1

Проблема заключается в том, как вы используете forEach(), так как она всегда будет возвращать undefined. Вероятно, вы ищете метод map(), который возвращает новый массив:

var tifOptions = Object.keys(tifs).map(function(key) {
    return <option value={key}>{tifs[key]}</option>
});

Если вы все еще хотите использовать forEach(), вам нужно будет сделать что-то вроде этого:

var tifOptions = [];

Object.keys(tifs).forEach(function(key) {
    tifOptions.push(<option value={key}>{tifs[key]}</option>);
});

Update:

Если вы пишете ES6, вы можете выполнить ту же самую вещь немного более аккуратно, используя функцию стрелки:

const tifOptions = Object.keys(tifs).map(key => 
    <option value={key}>{tifs[key]}</option>
)

Вот скрипка, показывающая все варианты, упомянутые выше: https://jsfiddle.net/fs7sagep/

Ответ 2

Вы можете использовать его более компактно, как:

var tifs = {1: 'Joe', 2: 'Jane'};
...

return (
   <select id="tif" name="tif" onChange={this.handleChange}>  
      { Object.entries(tifs).map((t,k) => <option key={k} value={t[0]}>{t[1]}</option>) }          
   </select>
)

Ответ 3

Я настоятельно рекомендую вам использовать массив вместо объекта, если вы выполняете реакцию на повторение, это синтаксис, который я использую для него.

const rooms = this.state.array.map((e, i) =>(<div key={i}>{e}</div>))

Чтобы использовать элемент, просто поместите {rooms} в свой jsx.

Где e = элементы массивов и я = индекс элемента. Подробнее здесь. Если вы ищете итерацию, это способ сделать это.