使用 select 在 MUI TextField 組件中獲取錯誤警告

Question

在控制台 MUI 中出現錯誤：將TextField組件與select一起使用時必須傳遞children項。

               <TextField
                select
                id="outlined-basic"
                label="User Name"
                name="user"
                size="small"
                {...teamForm.getFieldProps("user")}
                error={teamForm.touched.user && teamForm.errors.user}
                helpertext={teamForm.touched.user && teamForm.errors.user}
              >
                {list?.map((option) => (
                  <MenuItem key={option.username} value={option.name}>
                    {option.name}
                  </MenuItem>
                ))}
              </TextField>

Answer 1

在未提供列表時添加一些其他內容可能對此有所幫助：

 <TextField select id="outlined-basic" label="User Name" name="user" size="small" {...teamForm.getFieldProps("user")} error={teamForm.touched.user && teamForm.errors.user} helpertext={teamForm.touched.user && teamForm.errors.user} > {list? list.map((option) => ( <MenuItem key={option.username} value={option.name}> {option.name} </MenuItem> )): <div></div>} </TextField>