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;
}

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

2 个答案: