在 React 中使用 useState 映射外部数组后，如何显示/隐藏嵌套数组元素/组件？

Question

最初目标：我有 4 个组件，当单击其中一个组件时，其他三个组件消失，仅显示被单击的组件。再次单击该组件可将所有组件切换为再次显示。我的目标是向数组中的每个组件添加一个信息/描述对象，以便在切换组件时，其他组件仍然消失，但现在根据切换的组件显示描述。我的思考过程是为描述元素设置一个可见性标志，将其设置为 false，然后切换特定组件会将标志更改为 true 并显示描述。这是我目前的看法：const array = [    { id: 1, component: <Comp1/>, isVisible: true,       info: [{ id: 5, component: <div>info1</div>, isVisibleInfo: false }] },    { id: 2, component: <Comp2/>, isVisible: true,       info: [{ id: 6, component: <div>info2</div>, isVisibleInfo: false }] },    { id: 3, component: <Comp3/>, isVisible: true,       info: [{ id: 7, component: <div>info3</div>, isVisibleInfo: false }] },    { id: 4, component: <Comp4/>, isVisible: true,       info: [{ id: 8, component: <div>info4</div>, isVisibleInfo: false }] }  ];    export const Test = () => {    const [items, setItems] = useState(array);      const handleClick = (number) => {      const triggeredItems = items.map((item) => {        if (item.id !== number) {          item.isVisible = !item.isVisible;        }          return item;      });        setItems(triggeredItems);    };    const handleClickInner = (number) => {      const triggeredItemsInner = items.info.map((item) => {        if (item.id !== number) {          item.isVisibleInfo = !item.isVisibleInfo;        }          return item;      });        setItems(triggeredItemsInner);    };      return (      <div className="mt-1 pt-1 pb-3 px-3">        <div className="row text-center d-flex my-1">        {items.map(({ id, component, isVisible, info }) => (          <div            key={id}            className="col-lg-3 col-md-6 mb-4 justify-content-center"            onClick={() => handleClick(id)}            hidden={!isVisible}          >            { component }            {info.map(({ id, component, isVisibleInfo }) => (            <div              key={id}目前，我得到此输出 TypeError: Cannot read property 'map' of undefined in the 'handleClickInner function 因为我相信 map 无法映射嵌套数组，但总的来说，我不确定创建第二个函数是否是正确的方法甚至。仍在学习很多关于 React 及其方法的知识！任何想法或帮助将不胜感激！

Answer 1

我的目标是向数组中的每个组件添加一个信息/描述对象，以便在切换组件时，其他组件仍然消失，但现在根据切换的组件显示描述。

你不是真的想消失吧？听起来更像是您想要有条件地渲染组件。

更新

我误解了你的意图！现在他们消失了。

// hooks

const {useState} = React;

function Comp1(){

  return <div><p>Component 1</p></div>

}

function Comp2(){

  return <div><p>Component 2</p></div>

}

function Comp3(){

  return <div><p>Component 3</p></div>

}

function Comp4(){

  return <div><p>Component 4</p></div>

}

const array = [

    { id: 1, component: <Comp1/>, isVisible: true, 

      info: { id: 5, component: <div>info1</div>, isVisibleInfo: false } },

    { id: 2, component: <Comp2/>, isVisible: true, 

      info: { id: 6, component: <div>info2</div>, isVisibleInfo: false } },

    { id: 3, component: <Comp3/>, isVisible: true, 

      info: { id: 7, component: <div>info3</div>, isVisibleInfo: false } },

    { id: 4, component: <Comp4/>, isVisible: true, 

      info: { id: 8, component: <div>info4</div>, isVisibleInfo: false } }

  ];

const Test = () => {

    const [items, setItems] = useState(array);

  

    const handleClick = (number) => {

      

      const triggeredItems = items.map((item) => {

        if (item.id !== number) {

          item.isVisible = !item.isVisible;

        }

        item.info.isVisibleInfo =! item.info.isVisibleInfo

  

        return item;

      });

  

      setItems(triggeredItems);

    };

  

    return (

      <div className="mt-1 pt-1 pb-3 px-3">

        <div className="row text-center d-flex my-1">

        {items.map(({ id, component, isVisible, info }) => (

          isVisible ? 

          <div

            key={id}

            className="col-lg-3 col-md-6 mb-4 justify-content-center"

            onClick={() => handleClick(id)}

            hidden={!isVisible}

          >

            { component }

          {info.isVisibleInfo ? 

          <div

              key={info.id}

              className="col-lg-9 col-md-6 mb-4 justify-content-center"

            >

              { info.component }

              

            </div>

            : null}

          </div>

          : null

        ))}

        </div>

      </div>

    );

  };

function App(){

  return (

    <div>

      <Test />

    </div>

  );

};

// Render

ReactDOM.render(

  <App />,

  document.getElementById("react")

);

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>