如何在React中循環對象？

剛接觸React並試圖循環對象屬性，但React抱怨對象不是有效的反應兒童，有人請給我一些關於如何解決這個問題的建議嗎？我已經添加了createFragment，但並不完全確定這需要去哪裏或者我應該採取什麼方法？如何在React中循環對象？

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)

來源

2016-10-10 styler

我以前得到過類似的錯誤。使用'.map（）'奇怪的是我的修復。這也有趣：http://stackoverflow.com/questions/37997893/promise-error-objects-are-not-valid-as-a-react-child –

的問題是你使用forEach()的方式，因爲它會ALW ays返回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>); 
});

更新：

如果你正在編寫ES6，就可以完成同樣的事情有點整潔使用arrow function：

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

這裏是展示上述所有選項的小提琴：https://jsfiddle.net/fs7sagep/

來源

2016-10-10 20:06:58 tobiasandersen

嗯，使用這些仍然標誌反應錯誤不變的標誌。 js：38未捕獲的不變違例：對象作爲React子無效（找到：具有鍵{}的對象）。如果您打算渲染一組兒童，請改用數組，或者使用React附加組件中的createFragment（object）來包裝對象。檢查'Constructor'的渲染方法。 – styler

你是這樣做的：https：//jsfiddle.net/0fgv16dt/？ – tobiasandersen

啊！我的問題是，我將model.get（'tifs'）傳入Object.keys（），並且很喜歡！謝謝！ – styler

-2

我強烈建議你使用，而不是如果你正在做一個對象數組反應itteration，這是一個語法我用它奧芬。

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

要使用的元素，只需將{rooms}在你的JSX。

其中e =數組的元素，i =元素的索引。閱讀更多here。如果您在尋找itteration，這是做到這一點的方法。

來源

2016-10-10 20:11:59 alex1997

使用對象時，鍵通常是ID而不是索引。但是，如果密鑰都是索引，我同意你的看法。 – tobiasandersen

我很欣賞你的評論，但我不是在談論一個物體。使用數組看起來對我來說是最好的，文檔也是很好的。鑰匙根本不需要，它們是爲了保持你的元素的順序。我沒有發明keys的索引方法，這是寫在文檔中的：P – alex1997

雖然數組經常是，但它並不總是最好的選擇。當緩存東西時，例如，我通常轉向Map：s或對象。雖然React會根據索引添加鍵值，但如果不明確提供鍵值，肯定會有用例。 – tobiasandersen

如何在React中循環對象？

回答

相關問題