在 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

我的目标是向数组中的每个组件添加一个信息/描述对象，以便在切换组件时，其他组件仍然消失，但现在根据切换的组件显示描述。你不是真的想消失吧？听起来更像是您想要有条件地渲染组件。更新我误解了你的意图！现在他们消失了。// hooksconst {useState} = React;function Comp1(){&nbsp; return <div><p>Component 1</p></div>}function Comp2(){&nbsp; return <div><p>Component 2</p></div>}function Comp3(){&nbsp; return <div><p>Component 3</p></div>}function Comp4(){&nbsp; return <div><p>Component 4</p></div>}const array = [&nbsp; &nbsp; { id: 1, component: <Comp1/>, isVisible: true,&nbsp;&nbsp; &nbsp; &nbsp; info: { id: 5, component: <div>info1</div>, isVisibleInfo: false } },&nbsp; &nbsp; { id: 2, component: <Comp2/>, isVisible: true,&nbsp;&nbsp; &nbsp; &nbsp; info: { id: 6, component: <div>info2</div>, isVisibleInfo: false } },&nbsp; &nbsp; { id: 3, component: <Comp3/>, isVisible: true,&nbsp;&nbsp; &nbsp; &nbsp; info: { id: 7, component: <div>info3</div>, isVisibleInfo: false } },&nbsp; &nbsp; { id: 4, component: <Comp4/>, isVisible: true,&nbsp;&nbsp; &nbsp; &nbsp; info: { id: 8, component: <div>info4</div>, isVisibleInfo: false } }&nbsp; ];const Test = () => {&nbsp; &nbsp; const [items, setItems] = useState(array);&nbsp;&nbsp;&nbsp; &nbsp; const handleClick = (number) => {&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; const triggeredItems = items.map((item) => {&nbsp; &nbsp; &nbsp; &nbsp; if (item.id !== number) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.isVisible = !item.isVisible;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; item.info.isVisibleInfo =! item.info.isVisibleInfo&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; return item;&nbsp; &nbsp; &nbsp; });&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; setItems(triggeredItems);&nbsp; &nbsp; };&nbsp;&nbsp;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="mt-1 pt-1 pb-3 px-3">&nbsp; &nbsp; &nbsp; &nbsp; <div className="row text-center d-flex my-1">&nbsp; &nbsp; &nbsp; &nbsp; {items.map(({ id, component, isVisible, info }) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; isVisible ?&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="col-lg-3 col-md-6 mb-4 justify-content-center"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() => handleClick(id)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hidden={!isVisible}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { component }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {info.isVisibleInfo ?&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={info.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="col-lg-9 col-md-6 mb-4 justify-content-center"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { info.component }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : null}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : null&nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; };function App(){&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <Test />&nbsp; &nbsp; </div>&nbsp; );};// RenderReactDOM.render(&nbsp; <App />,&nbsp; 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>&nbsp; &nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>