數組在react js中打印為字符串

Question

當我們嘗試打印數組時，react 如何處理數組？

 class App extends Component { constructor() { this.state = { myarr: [1, 2, 3, 4, 5] }; } render(){ return <div>{this.state.myarr}</div> // it prints 12345.... I am able to understand why??? } } }

Answer 1

看起來您只想將數組顯示為數組。

您可以使用JSON.stringify(array) 。 喜歡

 class App extends React.Component { render() { const data = [1, 2, 3, 4, 5]; return <div>{JSON.stringify(data)}</div>; } } ReactDOM.render(<App/>, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='root'/>

為什么你的代碼打印12345因為你讓它這樣做。 {..}表達式中的任何內容都顯示其值

Answer 2

當您嘗試打印數組時，最好使用 .map() 函數。

使用地圖時，請確保為每個項目提供唯一的“索引”值。 鍵幫助 React 識別哪些項目已更改、添加或刪除。

    render() {
        return (
        <div>
          {this.state.myarr.map((number) => (
            <li key={number.toString()}>
              {number}
            </li>
            ))}
        </div>);
    }

在學習react之前先研究ES6的類方法，然后再閱讀官方文檔，確實很有幫助。 您可能甚至不必將該數組保持在某個狀態。

此鏈接可能會幫助您更好地理解。