React列表折叠展开功能异常，如何修改代码实现点击More显全部、Close显5条

问题排查&修改方案 #

现有代码的核心错误 #

• 你声明了visible和expanded两个独立状态，却错误地在setVisible方法中传入包含两个状态属性的对象，setVisible只能修改visible状态，无法同时修改expanded
• 列表切片时调用了未定义的变量visibleBlogs，你定义的控制展示数量的状态为visible，变量名不匹配
• setexpanded命名不符合小驼峰规范，建议调整为setExpanded

修正后的完整代码 #

const [visible, setVisible] = useState(5)
const [expanded, setExpanded] = useState(false);

const showMore = () => {
  if (visible === 5) {
    // 分别更新两个独立状态
    setVisible(ProductDetail.allergies.length)
    setExpanded(true)
  } else {
    setVisible(5)
    setExpanded(false)
  }
}

return (
  <>
    <ul>
      {ProductDetail && ProductDetail.allergies?.length ? 
        // 替换为正确的状态变量visible
        ProductDetail.allergies.slice(0, visible).map(All => (
          <li key={All.id}>
            {/* 列表内容逻辑保持不变 */}
          </li>
        )) : null}
    </ul>

    <button type="button" onClick={showMore}>
      {expanded ? (
        <span>close</span>
      ) : (
        <span>more</span>
      )}  
    </button>
  </>
)

可选优化方案 #

你可以仅保留visible一个状态，无需额外维护expanded，直接通过visible的值判断当前展示状态即可，简化代码如下：

const [visible, setVisible] = useState(5)

const showMore = () => {
  setVisible(visible === 5 ? ProductDetail.allergies.length : 5)
}

return (
  <>
    <ul>
      {ProductDetail && ProductDetail.allergies?.length ? 
        ProductDetail.allergies.slice(0, visible).map(All => (
          <li key={All.id}>
            {/* 列表内容逻辑保持不变 */}
          </li>
        )) : null}
    </ul>

    <button type="button" onClick={showMore}>
      {visible === 5 ? <span>more</span> : <span>close</span>}  
    </button>
  </>
)

内容的提问来源于stack exchange，提问作者ssksksks