Object.keys（obj）返回未显示在屏幕上

Question

我有以下代码片段，可在控制台中正常运行，但未显示在屏幕上。 任何帮助表示赞赏。

{Object.keys(flags).forEach(product => {
    return (
        <>
            <input
                type='checkbox'
                className='form-checkbox'
                name={product}
                value={product}
                onChange={this.gatherFormData}
            />
            <span className='label'>{product}</span>
        </>
    );
})}

产品键没有显示在屏幕上，即使我在控制台中也可以看到它。

Answer 1

不应该是：

return (
    <div> // needs an element wrapper
        <input
            type='checkbox'
            className='form-checkbox'
            name={product}
            value={product}
            onChange={this.gatherFormData}
        />
        <span className='label'>{product}</span>
    </div>
);

正如jonrsharpe所说-您还需要使用map（forEach只是迭代值-但不返回任何值）

{Object.keys(flags).map(product => {

Answer 2

在.forEach内部返回，不做任何事情将数据推入数组以供以后使用，或者从.map方法返回

这是一个示例，如果您需要在问题中使用.forEach ...

{
const products = [];
Object.keys(flags).forEach(product => {
  products.push (
    <>
        <input
            type='checkbox'
            className='form-checkbox'
            name={product}
            value={product}
            onChange={this.gatherFormData}
        />
        <span className='label'>{product}</span>
    </>
  );
})
return products;
}