基于React-Bootstrap的自研手风琴控件展开收起条件判断失效问题咨询

嘿，我看了你的代码，发现问题出在open属性的判断逻辑上，这才导致状态更新后没法正确控制手风琴的展开收起。

问题到底出在哪？ #

你现在写的open条件是：

open={this.props.id === this.state.accordionIdClicked}

这里的this.props.id是你的父组件自己接收的props里的id，而不是你传给AccordionItem的那个id={0}。简单说就是，你在拿父组件的id和点击的id做对比，而不是当前手风琴项的id——这就导致不管你点哪个项，判断逻辑都和当前项没关系，自然没法正确触发展开收起。

另外，虽然你说打印的id是对的，但还是得确认下你的AccordionItem组件内部，是不是真的把自身的id传给了父组件的onClick回调。这个环节要是没做好，也可能出问题。

怎么修复？ #

1. 把open的判断逻辑改对 #

你要拿当前手风琴项的id和state.accordionIdClicked比。比如你现在渲染的是id为0的项，就这么写：

<AccordionItem 
  id={0} 
  onClick={this.handleAccordionClick} 
  open={0 === this.state.accordionIdClicked}
  title="Title of First Item"
> 
Some content goes here inside this accordion item. 
</AccordionItem>

如果是循环渲染多个项（比如从数组里遍历），就用遍历出来的item id：

{yourItemsArray.map(item => (
  <AccordionItem 
    key={item.id}
    id={item.id} 
    onClick={this.handleAccordionClick} 
    open={item.id === this.state.accordionIdClicked}
    title={item.title}
  > 
    {item.content}
  </AccordionItem>
))}

2. 确认AccordionItem内部的事件传递 #

你的自研控件里，点击事件触发时，得把自己的id传给父组件的onClick。比如控件内部应该这么写：

// AccordionItem组件内部的点击处理
const handleInternalClick = () => {
  props.onClick(props.id); // 一定要把自己的id传出去
};

你说打印的id是对的，可能这步没问题，但还是建议检查下，确保没遗漏。

3. 可选：用函数式更新避免异步问题 #

如果你的组件有频繁点击的情况，为了避免setState异步更新带来的状态不一致，可以用函数式更新来拿最新的state：

handleAccordionClick = (id) => { 
  console.log("id clicked was: ", id);
  this.setState(prevState => ({
    // 加个小逻辑：点击已经展开的项就收起，否则展开
    accordionIdClicked: prevState.accordionIdClicked === id ? null : id 
  })); 
};

这样每次更新都是基于最新的state值，不会出现状态滞后的问题。

验证一下 #

改完之后，你点击手风琴项时，state会更新成当前项的id，open的条件就能正确匹配，展开收起就和你硬编码true/false时一样正常了。

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