如何為 state 數組中的每個項目添加 React JSX？

Question

我是 React 狀態的新手。 我已經學習了道具，現在正在學習狀態。 我現在有點困惑。 我正在創建一個 web 應用程序，您可以在其中將代碼片段存儲在有條理的地方。 在不使用狀態的情況下，我能夠使用 arrays 為片段創建虛擬數據。 它看起來像這樣：（注意片段數組，然后查看 JSX 代碼中的 runCallBack() 內部，看看我當前如何通過虛擬數據顯示片段。runCallBack() 是我在 JSX 代碼中運行 JS 代碼的方式.

export class Content extends React.Component {
    render() {
        const runCallback = (cb) => {
            return cb();
        }    

        const collections = [
            {title: 'ReactJS', color: 'red'},
            {title: 'HTML', color: 'cyan'},
            {title: 'CSS', color: 'pink'}
        ]

        const snippets = [
            {title: 'Generate ReactJS component', date: new Date(), code: "<code>Code goes here</code>", language: 'javascript', collection: collections[0]},
            {title: 'CSS Grow on hover', date: new Date(), code: "<code>Other code goes here</code>", language: 'css', collection: collections[2]}
        ]


        return (
            <div className="content">
                <h1 className="content-header">Snippets</h1>
                <div className="w-layout-grid grid">
                    {
                        runCallback(function() {
                            const row = [];
                            for (var i = 0; i < snippets.length; i++) {
                                row.push(<Snippet title={snippets[i].title} code={snippets[i].code} date={snippets[i].date} language={snippets[i].language} collection={snippets[i].collection}/>) 
                            }
                            return row;
                        })
                    }
                    
                </div>
            </div>
        )
    }
}

好吧，現在我正在嘗試將片段存儲在 state 中。 當我運行我的代碼時，頁面上沒有顯示任何內容。 它使所有組件消失，因此顯然它不起作用。 但這里的非工作代碼：

export class Content extends React.Component {
    constructor(props) {
        super(props)
        const collections = [
            {title: 'ReactJS', color: 'red'},
            {title: 'HTML', color: 'cyan'},
            {title: 'CSS', color: 'pink'}
        ]
        this.state = {
            snippets: [
                {title: 'Generate ReactJS component', date: new Date(), code: "<code>Code goes here</code>", language: 'javascript', collection: collections[0]},
                {title: 'CSS Grow on hover', date: new Date(), code: "<code>Other code goes here</code>", language: 'css', collection: collections[2]}  
            ]
        }
    }
    render() {
        const runCallback = (cb) => {
            return cb();
        }    

        return (
            <div className="content">
                <h1 className="content-header">Snippets</h1>
                <div className="w-layout-grid grid">
                    {
                        runCallback(function() {
                            const row = []
                            const snippets = this.state.snippets
                            for (var i = 0; i < snippets.length; i++) {
                                row.push(<Snippet title={snippets[i].title} code={snippets[i].code} date={snippets[i].date} language={snippets[i].language} collection={snippets[i].collection}/>) 
                            }
                            return row;
                        })
                    }
                    
                </div>
            </div>
        )
    }
}
export default Content

抱歉，如果這是一個愚蠢的問題，但我現在正在學習狀態。 我能夠成功地在其他情況下使用狀態，但不是這種情況。 我也聽說過 Redux 並使用它來存儲 state 數據，但我一次只學習一件事。

Answer 1

問題是您試圖在function中訪問this 。 在這種情況下， this將是 function，而不是組件。 因此，您將無法訪問state 。

嘗試改用箭頭 function。 您只需將runCallback(function() {替換為runCallback(() => {

Answer 2

您應該使用“runCallback”內的箭頭。 常規函數覆蓋有自己的根“this”，而箭頭 function 沒有。

也許查看這篇文章了解更多信息 - https://levelup.gitconnected.com/arrow-function-vs-regular-function-in-javascript-b6337fb87032

Answer 3

而不是您的回調 function，只需在 state 數組上使用 a.map 方法生成 JSX。

this.state.snippets.map((snippet) => {
   return (<JSX>...</JSX>)
})