我有一个应用程序,它使用了各种输入功能。例如,我有一个从API请求构建的初始数据集,见下文:
const [userData, setuserData] = useState([])
const companyuser = useSelector(state=>state.companyuser.currentUser)
useEffect(()=> {
const getUserData = async ()=>{
try{
const companyResponse = await userRequest.get(`companyprofile/findCompany/${companyuser._id}`);
setuserData(companyResponse.data.others)
}catch(err){}
};
getUserData()
},[])
const userInputDataSchema = [
{
id: 1,
label: "companyTitle",
type: "companyTitle",
placeholder: userData.companyTitle,
},
{
id: 2,
label: "surname",
type: "surname",
placeholder: userData.surname
},
{
id: 3,
label: "Email",
type: "email",
placeholder: userData.email
},
{
id: 4,
label: "Position",
type: "position",
placeholder: userData.position
},
{
id: 5,
label: "User Image",
type: "image",
placeholder: userData.userImage
},
{
id: 6,
label: "Professional Bio",
type: "professionalBio",
placeholder: userData.employees
},
{
id: 7,
label: "locationCity",
type: "locationCity",
placeholder: userData.locationCity
},
{
id: 8,
label: "locationCountry",
type: "locationCountry",
placeholder: userData.locationCountry
},
{
id: 9,
label: "whyWork_1",
type: "whyWork_1",
placeholder: userData.whyWork_1
},
];
然后,此数据将Map到整个应用程序,并在使用时更新。例如:
<UpdateUserDetailsSingular>
{userInputDataSchema.map((input) => (
<FormInput className="formInput" key={input.companyTitle}>
{input.id == 1 ?
<UserInput type={input.type} name="companyTitle" placeholder={input.placeholder}
onChange={handleChange} />
: null}
</FormInput>
))}
</UpdateUserDetailsSingular>
这是有效的。当我使用MUI大输入文本域时,它不会更新我的状态。它会显示占位符文本,但如果你键入它将不会处理它。
原因何在?
{userInputDataSchema.map((input) => (
<div>
{input.id == 9 ?
<TextField
name="whyWork_1"
label="Diversity & Inclusion at Australia Post"
multiline
rows={15}
defaultValue={input.placeholder}
key={input.placeholder}
fullWidth
fullHeight
type={input.type}
handleChange={handleChange}
/> : null}
</div>
))}
</InputBoxContainer>
是否
1条答案
按热度按时间olhwl3o21#
其原因可能是TextField中与Mui相关的错误配置。
从
defaultValue
切换到value
应该可以完成这项工作。