如何编程控制React组件属性？解决TextField defaultValue赋值问题

你的代码主要有三个问题导致无法正常运行：

1. JSX表达式不支持直接使用if语句：在JSX的大括号表达式中，只能使用表达式（比如三元运算符、逻辑短路），不能用语句级的if。
2. 未处理jobData为undefined的情况：直接访问jobData.length会触发Cannot read properties of undefined的类型错误。
3. else分支逻辑错误：当jobData不存在时，你试图访问jobData.length，这同样会报错，且不符合你“赋值其他内容”的需求。

修正后的代码 #

import React from 'react'
import {TextField} from '@mui/material'

// React组件名建议大写开头，避免命名冲突
export default function MyComponent({jobData}) {
    // 提前计算默认值：先判断jobData是否存在且有内容，再取值
    const defaultId = jobData?.length > 0 ? jobData[0].id : '无可用ID';

    return(
        <div>
            <form>
                <TextField
                  autoFocus
                  margin="dense"
                  width="100%"
                  id="my_id"
                  label="My ID"
                  type="text"
                  name="myID"
                  defaultValue={defaultId}
                />
            </form> 
        </div>
    )
}

关键说明 #

• 可选链运算符?.：当jobData为undefined或null时，jobData?.length会直接返回undefined，不会触发报错，保证代码的安全性。
• 三元运算符替代if：这是JSX中实现条件赋值的标准方式，语法为条件 ? 满足条件的值 : 不满足条件的值。
• 提前抽离逻辑：把默认值的计算放到return外面，让JSX结构更简洁，也方便后续修改逻辑。
• 自定义默认内容：把'无可用ID'替换成你需要的“其他内容”即可，比如空字符串''。

内容的提问来源于stack exchange，提问作者gwydion93