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

Question

react版本如下：

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

已写的部分代码：

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>
    )
}

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

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

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

Answer 1

该回答引用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调用顺序变化而导致的警告和错误。