Ken428965 2023-03-14 12:05 采纳率: 53.4%
浏览 43
已结题

react,报错Warning: React has detected a change in the order of Hooks called by FormItem

react版本如下:

img

希望实现如下效果,如果户型的选中值为四室,则显示加分项,否则不显示加分项:

img

img

已写的部分代码:

import React, { useState } from 'react'
import {
  List,
  Form,
  Input,
  Picker,
  ImageUploader,
  TextArea,
  Modal,
  Toast,
  Button
} from 'antd-mobile'

const roomTypeData = [
      { label: '三室', value: 'ROOM|20903a' },
      { label: '四室', value: 'ROOM|ce2a5d' }
]

const RentAdd = () => {
    const [huxingvisible, setHuxingVisible] = useState(false)
    // 加分
    const [price,setPrice] = useState('')
    // 户型
    const [roomType,setRoomType] = useState('')

    function Huxing() {
    return (
        <Picker
          title='户       型'
          columns={[roomTypeData]}
          visible={huxingvisible}
          mouseWheel={true}
          popupClassName={styles.huxing}
          onClose={() => {setHuxingVisible(false)}}
          onConfirm={(v = []) => {
            let item = roomTypeData.find(r => r.value === v[0]) || {}
            setRoomType(item.value)
          }}
        />
    )
  }

//...

    return (
          <Form>
                 <Form.Item
                        label='户       型'
                        extra={roomType.length ? roomTypeData.filter(item=>item.value===roomType)[0].label : '请选择'}
                        arrow={true}
                        onClick={() => {
                            setHuxingVisible(true)
                        }}
                 >
                       {Huxing()}
                  </Form.Item>

                  {/* 如果户型的选中值为四室,则显示加分项,否则不显示加分项 */}
                  {roomType ==='ROOM|ce2a5d' && roomTypeData.map(item => item.label == '四室' ? <Form.Item key={item.label} label='加       分' name='zujin' extra="积分"}>
                        <Input
                            placeholder="请输入大于零的整数"
                            style={{'--font-size': '14.0625px','--placeholder-color': '#999999'}}
                            value={price}
                            clearable
                            maxLength={11}
                            onChange={val => {setPrice(val)}}
                         />
                    </Form.Item> : '' )}
          </Form>
    )
}

目前效果如下,当户型的选中值为四室时,加分项显示出来,当户型的选中值不为四室时,加分项没有显示出来,但是,浏览器控制台报错:

img

搜索过网上关于此报错的文章,都说当使用hook和函数语句或者if条件句时,需要把hook放在最顶部,而本提问的代码里已经把hook放在最顶部

请问代码出了什么问题?如何修改?恳请在现有代码基础上展示说明,谢谢。

  • 写回答

1条回答 默认 最新

  • MarkHan_ 2023-03-14 12:57
    关注

    该回答引用GPTᴼᴾᴱᴺᴬᴵ
    这个错误通常是由于在组件的渲染过程中,Hooks的调用顺序发生了变化,导致React不能正确地跟踪每个Hook的状态。根据您提供的代码,可能是因为在条件语句中使用了Hooks导致的。

    您可以尝试将条件语句中的Form.Item分离为一个单独的组件,并在该组件内使用Hooks,以确保每个Hook的调用顺序始终保持不变。修改后的代码如下:

    import React, { useState } from 'react'
    import {
    List,
    Form,
    Input,
    Picker,
    ImageUploader,
    TextArea,
    Modal,
    Toast,
    Button
    } from 'antd-mobile'
    
    const roomTypeData = [
    { label: '三室', value: 'ROOM|20903a' },
    { label: '四室', value: 'ROOM|ce2a5d' }
    ]
    
    const HuxingPicker = ({ visible, onClose, onConfirm }) => {
    return (
    <Picker
    title='户 型'
    columns={[roomTypeData]}
    visible={visible}
    mouseWheel={true}
    popupClassName={styles.huxing}
    onClose={() => onClose(false)}
    onConfirm={onConfirm}
    />
    )
    }
    
    const AddScoreFormItem = ({ value, onChange }) => {
    return (
    <Form.Item key='加分' label='加 分' name='zujin' extra='积分'>
    <Input
    placeholder='请输入大于零的整数'
    style={{ '--font-size': '14.0625px', '--placeholder-color': '#999999' }}
    value={value}
    clearable
    maxLength={11}
    onChange={onChange}
    />
    </Form.Item>
    )
    }
    
    const RentAdd = () => {
    const [huxingvisible, setHuxingVisible] = useState(false)
    const [price, setPrice] = useState('')
    const [roomType, setRoomType] = useState('')
    
    const handleRoomTypeChange = (v = []) => {
    let item = roomTypeData.find((r) => r.value === v[0]) || {}
    setRoomType(item.value)
    }
    
    return (
    <Form>
    <Form.Item
    label='户 型'
    extra={
    roomType.length
    ? roomTypeData.filter((item) => item.value === roomType)[0].label
    : '请选择'
    }
    arrow={true}
    onClick={() => {
    setHuxingVisible(true)
    }}
    >
    <HuxingPicker
           visible={huxingvisible}
           onClose={setHuxingVisible}
           onConfirm={handleRoomTypeChange}
         />
    </Form.Item>
    
      {roomType === 'ROOM|ce2a5d' && (
        <AddScoreFormItem value={price} onChange={(val) => setPrice(val)} />
      )}
    </Form>
    )
    }
    
    

    通过这样的方式,您应该能够避免React检测到Hooks调用顺序变化而导致的警告和错误。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

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

悬赏问题

  • ¥15 如何构建全国统一的物流管理平台?
  • ¥100 ijkplayer使用AndroidStudio/CMake编译,如何支持 rtsp 直播流?
  • ¥20 和学习数据的传参方式,选择正确的传参方式有关
  • ¥15 这是网络安全里面的poem code
  • ¥15 用js遍历数据并对非空元素添加css样式
  • ¥15 使用autodl云训练,希望有直接运行的代码(关键词-数据集)
  • ¥50 python写segy数据出错
  • ¥20 关于线性结构的问题:希望能从头到尾完整地帮我改一下,困扰我很久了
  • ¥30 3D多模态医疗数据集-视觉问答
  • ¥20 设计一个二极管稳压值检测电路