React报错：Uncaught TypeError: guess.map is not a function求助

问题场景 #

在React项目中执行以下操作后触发报错：

• 创建数组并通过useState定义为状态guess
• 渲染MyTest组件并传递guess作为props

App组件代码：

function App() {
    const [guess, setGuess] = useState([
        {number: 1, name: "Maks", age: 27, city: "Krasnodar", partnet: "with wife", phone: +79292648958,country: "Russia"},
        {number: 2, name: "Dmitriy", age: 30, city: "Moscow", partnet: "with wife", phone: +79293647821,country: "Russia"},
        {number: 3, name: "Alexandr", age: 22, city: "Moscow", partnet: "with wife", phone: +79293684794,country: "Russia"},
        {number: 4, name: "Frank", age: 35, city: "Krasnodar", partnet: "with wife", phone: +79299675874,country: "Australia"},
    ]);

    return (
        <MyTest guess={guess}/>
    )
}

MyTest组件代码：

const MyTest = (guess) => {
    console.log(guess)
    return (
        <div className="basic">
            <div className="basic__container">
                <div className="basic__block">
                <div className="basic__title">Список гостей</div>
                    {guess.map(geuss => {
                            return <div>sssss</div>
                        }
                    )}
                </div>
            </div>
        </div>
    );
};

报错信息：

Uncaught TypeError: guess.map is not a function
    at MyTest (MyTest.jsx:11:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)

问题原因 #

你的猜测方向正确，guess确实不是数组——但问题出在组件接收props的方式：React组件的参数是一个包含所有传入props的对象，而非单个属性值。你现在把组件参数命名为guess，这个变量实际是整个props对象（原型为Object），而非你传入的数组，因此无法调用map方法。

解决方案 #

有两种修复方式，任选其一即可：

方式1：解构props直接取出目标属性

直接在组件参数中解构出guess属性，这样变量guess就是你传入的数组：

const MyTest = ({ guess }) => {
    console.log(guess) // 现在是数组类型
    return (
        <div className="basic">
            <div className="basic__container">
                <div className="basic__block">
                    <div className="basic__title">Список гостей</div>
                    {guess.map(item => {
                        // 可以渲染实际数据，比如每个客人的名字
                        return <div key={item.number}>{item.name}</div>
                    })}
                </div>
            </div>
        </div>
    );
};

方式2：通过props对象访问目标属性

保留props参数，通过props.guess访问传入的数组：

const MyTest = (props) => {
    console.log(props.guess) // 数组类型
    return (
        <div className="basic">
            <div className="basic__container">
                <div className="basic__block">
                    <div className="basic__title">Список гостей</div>
                    {props.guess.map(item => {
                        return <div key={item.number}>{item.name}</div>
                    })}
                </div>
            </div>
        </div>
    );
};

额外提示 #

注意代码中的拼写错误geuss（建议改为item或guest），同时建议给map生成的元素添加唯一key属性（比如用item.number），符合React的渲染规范。

内容的提问来源于stack exchange，提问作者Максим Дмитриевич