"TypeError: visible.map is not a function" when toggling button

Question

尝试在 React 中呈现列表。我希望每个按钮都能切换具有某些内容的组件的可见性（这将是一系列项目）。我得到了按预期呈现的列表，但是每当我单击其中一个按钮时，我都会收到“TypeError：visible.map 不是函数”。当我单独渲染每个组件时代码有效，但是当我引入状态和 .map 时，突然我们不再是朋友了...

Parent:

import { useState } from 'react';

import ExampleOne from './Examples/exampleOne.js';
import ExampleTwo from './Examples/exampleTwo.js';
import ExampleThree from './Examples/exampleThree.js';

function SectionTwo() {

     const [visible, setVisible] = useState([
        { number: 1, content: < ExampleOne setVisible = { visible => setVisible(visible => !visible)} />, visible: false },
        { number: 2, content: < ExampleTwo setVisible = { visible => setVisible(visible => !visible)} />, visible: false },
        { number: 3, content: < ExampleThree setVisible = { visible => setVisible(visible => !visible)} />, visible: false }
    ]);
 
    return ( 

        <div className="section-content seciton2">
            <p>We're no strangers to love<br/>
            You know the rules and so do I<br/>
            A full commitment's what I'm thinking of<br/>
            You wouldn't get this from any other guy<br/>
            I just wanna tell you how I'm feeling<br/>
            Gotta make you understand</p>

            
                    {visible.map((i) => (
                <ul className="examples"
                    onClick={() => setVisible(visible => !visible)}
                    key={i.number}
                >
                    <button className={ 'example' + i.number } onClick={() => setVisible(visible => !visible)}></button>
                </ul>
                ))}
                

        </div>

    );
  }

export default SectionTwo;

Children:

import { useEffect, useRef } from 'react';

function ExampleThree(props) {

    let exampleRef = useRef();

    useEffect (() => {
        let handler = (event) => {
            if (!exampleRef.current.contains(event.target)) {
            props.setVisible(false);
            }
        }
        
        document.addEventListener("mousedown", handler);

        return () => {
            document.removeEventListener("mousedown", handler)
        }
    });



    return ( 
  
        <div className="example3-content" ref={exampleRef}>

            <p>We're no strangers to love<br/>
            You know the rules and so do I<br/>
            A full commitment's what I'm thinking of<br/>
            You wouldn't get this from any other guy<br/>
            I just wanna tell you how I'm feeling<br/>
            Gotta make you understand</p>
            
            <button onClick={() => props.setVisible(visible => !visible)}>ha det</button>

        </div>

    );
  }

export default ExampleThree;

（不要管占位符文本，我只是厌倦了 Lorem Ipsum...）

Answer 1

setVisible(visible => !visible)

这段代码可能并不符合您的想法。最初，您有一组对象设置为名为 visible 的状态。当你否定它时，它就变成了 false。因此，它不能在值为 false.

的状态上调用 map 函数

Answer 2

这段代码中有很多问题，我不太明白你想要完成什么，所以我不会尝试改进它。但我会做一个快速的代码审查并给你一些建议；

我建议您永远不要更改状态元素的类型（在此示例中，从数组到布尔值的可见更改会导致错误）
你还应该避免声明式编程，这意味着如果你不确定自己在做什么，你应该避免使用 useRef
我会共同定位它所属的状态（组件的可见性状态属于组件本身而不是父组件）
你应该在适用的地方使用 JSX 而不是 JSON，这意味着我永远不会使用数组来映射，而是使用 JSX 的强大功能并直接编写那些“内容”

"TypeError: visible.map is not a function" when toggling button

"TypeError: visible.map is not a function" when toggling button

dictionary

toggle

reactjs