Ken428965 2022-11-01 00:02 采纳率: 53.4%
浏览 52
已结题

react,chrome浏览器报错:Uncaught ReferenceError: props is not defined

在使用的react版本如下:

img


已写的部分代码:

import React, { Component, useState, useEffect } from 'react'

import { AiOutlineDatabase, AiOutlineFire } from 'react-icons/ai'
import { CgSmartHomeWashMachine, CgSmartHomeRefrigerator } from 'react-icons/cg'
import { SiVfairs, SiInternetexplorer } from 'react-icons/si'
import { WiHot } from 'react-icons/wi'
import { MdPersonalVideo } from 'react-icons/md'
import { IoWaterSharp } from "react-icons/io5"
import { TbSofa } from 'react-icons/tb'

// 所有房屋配置项
const HOUSE_PACKAGE = [
  {
    id: 1,
    name: '衣柜',
    icon: <AiOutlineDatabase />
  },
  {
    id: 2,
    name: '洗衣机',
    icon: <CgSmartHomeWashMachine />
  },
  {
    id: 3,
    name: '空调',
    icon: <SiVfairs />
  },
  {
    id: 4,
    name: '天然气',
    icon: <AiOutlineFire />
  },
  {
    id: 5,
    name: '冰箱',
    icon: <CgSmartHomeRefrigerator />
  },
  {
    id: 6,
    name: '暖气',
    icon: <WiHot />
  },
  {
    id: 7,
    name: '电视',
    icon: <MdPersonalVideo />
  },
  {
    id: 8,
    name: '热水器',
    icon: <IoWaterSharp />
  },
  {
    id: 9,
    name: '宽带',
    icon: <SiInternetexplorer />
  },
  {
    id: 10,
    name: '沙发',
    icon: <TbSofa />
  }
]

function HousePackage() {
    // 选中名称
const [selectedNames, setSelectedNames] = useState([])
  // 根据id切换选中状态
useEffect(()=>{
  const toggleSelect = name => {
    let newSelectedNames

    // 判断该项是否选中
    if (selectedNames.indexOf(name) > -1) {
      // 选中:从数组中删除选中项,也就是保留未选中项
      newSelectedNames = selectedNames.filter(item => item !== name)
    } else {
      // 未选中:添加到数组中
      newSelectedNames = [...selectedNames, name]
    }

    // 传递给父组件
    props.onSelect(newSelectedNames)

    setSelectedNames(newSelectedNames)
  }

  // 渲染列表项
  function renderItems() {
    // select 的值为 true 表示 选择房屋配置;false 表示仅展示房屋列表
    // list 表示要展示的列表项
    const { select, list } = props

    let data
    // 如果传了 select 表示:选择 房屋配置
    // 如果没传 select 表示:展示 房屋配置 列表
    if (select) {
      data = HOUSE_PACKAGE
    } else {
      // 展示房屋配置列表
      // 从所有的列表项中过滤出要展示的(list)列表项
      data = HOUSE_PACKAGE.filter(v => list.includes(v.name))
    }

    return data.map(item => {
      // 判断该项是否选中
      const isSelected = selectedNames.indexOf(item.name) > -1

      return (
        <li
          key={item.id}
          className={[styles.item, isSelected ? styles.active : ''].join(' ')}
          onClick={select && (() => toggleSelect(item.name))}
        >
          <p>
            <i className={`iconfont ${item.icon} ${styles.icon}`} />
          </p>
          {item.name}
        </li>
      )
    })
  }
},[])
    return <ul className={styles.root}>{renderItems()}</ul>
}

// 属性默认值,防止在使用该组件时,不传 onSelect 报错
HousePackage.defaultProps = {
  onSelect: () => {}
}

export default HousePackage

chrome浏览器报错:

img


请问代码出了什么问题?请问正确的写法是什么?望在现有代码里举例说明

  • 写回答

4条回答 默认 最新

  • 撸空投的菜鸟 2022-11-01 10:07
    关注

    函数式组件,想要使用props,得把props作为参数传给函数

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 11月1日
  • 已采纳回答 11月1日
  • 创建了问题 11月1日

悬赏问题

  • ¥15 Qt4代码实现下面的界面
  • ¥15 prism提示我reinstall prism 如何解决
  • ¥15 asp.core 权限控制怎么做,需要控制到每个方法
  • ¥20 while循环中OLED显示中断中的数据不正确
  • ¥15 这个视频里的stm32f4代码是怎么写的
  • ¥15 JNA调用DLL报堆栈溢出错误(0xC00000FD)
  • ¥15 请教SGeMs软件的使用
  • ¥15 自己用vb.net编写了一个dll文件,如何只给授权的用户使用这个dll文件进行打包编译,未授权用户不能进行打包编译操作?
  • ¥50 深度学习运行代码直接中断
  • ¥20 需要完整的共散射点成像代码