如何为状态数组中的每个项目添加 React JSX？

Question

我是 React 状态的新手。我已经学习了道具，现在正在学习状态。我现在有点困惑。我正在创建一个网络应用程序，您可以在其中将代码片段存储在有组织的地方。在不使用状态的情况下，我能够使用数组为片段创建虚拟数据。它看起来像这样：（注意 snippets 数组，然后查看 JSX 代码中的运行CallBack() 内部，看看我当前是如何通过虚拟数据显示片段的。运行CallBack() 是我在 JSX 代码中运行ning 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>
        )
    }
}

好吧，现在我正在尝试将片段存储在状态中。当我运行我的代码时，页面上没有显示任何内容。它使所有组件消失，很明显它不起作用。但这里是非工作代码：

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 并用它来存储状态数据，但我一次只学一件事。

Answer 1

不用回调函数，只需在状态数组上使用 .map 方法生成 JSX。

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

Answer 2

问题是您试图在 function 中访问 this。在这种情况下，this 将是函数，而不是组件。因此，您将无法访问 state.

尝试改用箭头函数。您只需将 runCallback(function() { 替换为 runCallback(() => {

即可

Answer 3

你应该使用“runCallback”里面的箭头。常规函数覆盖有自己的根“this”，而箭头函数没有。

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

如何为状态数组中的每个项目添加 React JSX？

How to add React JSX for every item in state array?

javascript

state

node.js

reactjs