React 17中if条件判断失效问题及代码适配求助

你这段代码在React17中条件判断不生效的核心原因是：当item.status !== 'Pending'时，map回调函数没有返回任何值（相当于返回undefined）。React17对数组渲染的元素要求更严格，不允许出现undefined，而React18放宽了这个限制，所以能正常运行。

以下是两种适配React17的修改方案：

方案一：给map回调添加默认返回值 #

在map的if分支外补充返回null，确保每个迭代都返回有效React节点或null：

import React from 'react'

export const Pending = ({ items, setItems, updateStatus }) => {
    return (
        <div className="pending">
            <h1>Pending</h1>

            {
                items && items.map(item => {
                    if (item && item.status === 'Pending')
                        return <>
                            <p className="item" key={item.id}>
                                {item.title}
                                <button className="mark_complete" onClick={() => { updateStatus(item.id, 'Completed') }}>Mark Complete</button>
                            </p>
                        </>
                    // React17要求必须返回有效节点或null
                    return null
                })
            }

        </div>
    )
}

方案二：先过滤数组再映射（更推荐） #

先通过filter筛选出符合条件的项，再进行map渲染，代码逻辑更清晰，也避免了无效迭代的问题：

import React from 'react'

export const Pending = ({ items, setItems, updateStatus }) => {
    // 先过滤出status为Pending的项，空数组兜底避免报错
    const pendingItems = items?.filter(item => item?.status === 'Pending') || []

    return (
        <div className="pending">
            <h1>Pending</h1>

            {pendingItems.map(item => (
                <p className="item" key={item.id}>
                    {item.title}
                    <button 
                        className="mark_complete" 
                        onClick={() => updateStatus(item.id, 'Completed')}
                    >
                        Mark Complete
                    </button>
                </p>
            ))}

        </div>
    )
}

额外优化说明 #

原代码中给<button>添加的key属性是多余的，key只需要绑定在map返回的最外层元素上，所以可以移除按钮的key。

内容的提问来源于stack exchange，提问作者Balaji Parthiban LatentView