如何避免 React Hook UseState 共享状态

Question

这个问题的标题可能不好，但这是我的情况。

我使用一大块 json 来呈现列表。列表项可以展开并显示子列表(如果它具有子属性(。json 结构包括两个数组，每个数组包含更多子数组。我使用选项卡来切换数组。

我使用 useState 来管理每个子数组组件的值isExpanded。 但似乎所有选项卡的状态isExpaned都是共享的。

即使我切换到另一个选项卡，状态isExpanded也保持不变。换句话说，为什么当我切换到另一个选项卡时，子列表会不断展开？

此外，为什么每个选项卡的扩展子列表相互重叠。当我切换到另一个选项卡时，它们应该保持"关闭"，因为我已经将初始状态设置为 false。( const [isExpand, setIsExpand] = useState(false) (

const ListItem = ({name, children}) => {
  const [subList, setSubList] = useState(null)
  const [isExpand, setIsExpand] = useState(false)
  const handleItemClick = () => {
    children && setIsExpand(!isExpand)
    console.log(isExpand)
  }
  useEffect(() => {
    isExpand && children && setSubList(children)
  }, [isExpand, children])
  return (
    <div className='list-wrapper'>
      <div className='list-item'>
        {name}
        {
          children && 
          <span 
            className='expand' 
            onClick={() => handleItemClick()}>
            {isExpand ? '-' : '+'}
          </span>
        }
      </div>
      <div className='list-children'>
        {
          isExpand && subList && subList.map((item, index) => 
            <ListItem key={index} name={item} />
          )
        }
      </div>
    </div>
  )
}

这是代码三盒，有人帮忙吗？

Answer 1

由于index被用作ListeItem键，React 似乎感到困惑。
(React 将尝试"共享"isExpanded状态，因为它们根据您指定的键看起来相同(

您可以从key={index}更改密钥

   <div className="contents">
      {contents &&
        contents.children &&
        contents.children.map((item, index) => (
          <ListItem
            ...... 👇 ....
            key={index}
            name={item.name}
            children={item.children}
          />
        ))}
    </div>

要使用更不同的键，item.name

   <div className="contents">
      {contents &&
        contents.children &&
        contents.children.map(item => (
          <ListItem
            ...... 👇 ....
            key={item.name}
            name={item.name}
            children={item.children}
          />
        ))}
    </div>

查看分叉的沙盒。
https://codesandbox.io/s/soanswer57212032-9ggzj