如何使用递归函数动态更改嵌套状态？

如何解决如何使用递归函数动态更改嵌套状态？

我对反应很陌生，我想学习如何动态更新深层嵌套对象中的状态。

假设我有一个深层嵌套对象：

 const initialState = [
      { a: [{ a: [{ a: [{ a: 5 },{ b: 4 }] },{ b: 3 }] },{ b: 2 }] },{ b: 1 },];

我想在不同的按钮和 onClick 中呈现每个“b”值以增加它的值。 像这样的东西： buttons image

为此，我想使用递归函数。 有了这个，我可以显示所有项目，但我不知道如何更新按钮中每个嵌套状态的状态。

到目前为止我的代码是：

function RecursiveComponent({ nestedobject,setnestedobject }) { 

      function handleIncrement() { //this event handler it's not correct for updating the nested states,setnestedobject((prevstate) => {
          prevstate[1].b = prevstate[1].b + 1;
          return { ...prevstate };
        });
      }

      return (
        <>
          {nestedobject && (
            <div>
              <button onClick={handleIncrement}>{nestedobject[1].b}</button>
              {typeof nestedobject[0].a === "object" && (
                <RecursiveComponent
                  nestedobject={nestedobject[0].a}
                  setnestedobject={setnestedobject}
                />
              )}
            </div>
          )}
        </>
      );
    }
    
    function App() {
      const [nestedobject,setnestedobject] = useState(initialState);
    
      function handleIncrement() {
        setnestedobject((prevstate) => {
          prevstate[1].b = prevstate[1].b + 1;
          return { ...prevstate };
        });
      }
    
      return (
        <>
          {nestedobject && (
            <button onClick={handleIncrement}>{nestedobject[1].b}</button>
          )}
          {nestedobject && typeof nestedobject[0].a === "object" && (
            <RecursiveComponent
              nestedobject={nestedobject[0].a}
              setnestedobject={setnestedobject}
            />
          )}
        </>
      );
    }

所以我有两个问题：

1.如何动态更新每个嵌套状态？

2.为什么当我点击第一个事件时它会增加 1，但之后再次点击时它会增加 2？