json MUI文本字段未更新状态

bzzcjhmw  于 2023-01-10  发布在  其他
关注(0)|答案(1)|浏览(118)

我有一个应用程序,它使用了各种输入功能。例如,我有一个从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>

是否

olhwl3o2

olhwl3o21#

其原因可能是TextField中与Mui相关的错误配置。

defaultValue    any     The default value. Use when the component is not controlled.
value           any     The value of the input element, required for a controlled component.

defaultValue切换到value应该可以完成这项工作。

相关问题