我怎样才能 return a div from forEach inside map function？

Question

我正在 React 中构建一个新组件来显示过滤器。我的筛选数据如下所示：

{countries: [0: {value: 'England'}, 1: {value: 'Australia'}], continents: []}

在我的渲染函数中，我想 return 一个 div 对象内的每个值（英国、澳大利亚）。目前，我没有得到任何渲染到 Dom.

render() {
        const {i18n, t} = this.props;
    
        return <div className={'filter'}>
            <ul className={'filter-list'}>
                {
                    Object.keys(this.props.filters).map(i => {
                        this.props.filters[i].forEach(
                            element => {
                                console.log('element', element)
                                return <p>{element.value}</p>
                            }
                        )
                    })
                }
            </ul>
        </div>;
    }

有谁知道我如何才能正确实现 this/return 的价值？

Answer 1

forEach 没有 return 任何东西。您需要使用 map 代替：

{
  Object.keys(this.props.filters).map((i) => {
    // Switched to .map and added `return`
    return this.props.filters[i].map((element) => {
      return <p>{element.value}</p>;
    });
  });
}

此代码将创建一个二维元素数组，但 React 支持它。

我怎样才能 return a div from forEach inside map function？

How can I return a div from forEach inside map function?

javascript

reactjs