React MUI TextField 無法更新本地 State

Question

我有一個多表單樣式的頁面，其中運行 forms 將包含用戶數據。 例如，這是一個工作組件以及它的功能。

          <UpdateUserDetailsSingularVert>
            <Typography variant="subtitle1sub" color="secondary">
                Country
            </Typography>
            {userInputDataSchema.map((input) => (
                <FormInput className="formInput" key={input.locationCountry}>
                  {input.id == 8 ?
                  <UserInput type={input.type} name="locationCountry" placeholder={input.placeholder}
                  onChange={handleChange}  />
                  : null}
                </FormInput>
                ))}
          </UpdateUserDetailsSingularVert>

使用上述組件，它將通過使用效果來處理更改：

  const [userData, setuserData] = useState([])
  const [input, setInput] = useState("")
  const [value, setValue] = React.useState(0);



  useEffect(()=> {
    const getUserData = async ()=>{
      try{
          const companyResponse = await userRequest.get(`companyprofile/findCompany/${companyuser._id}`);
          setuserData(companyResponse.data.others)
      }catch(err){}
    };
    getUserData()
},[])

//pass in the event
const handleChange = (e) => {
  //include all in the state earlier with spread
  //update only position, which is input
  setuserData(prev=>({...prev, [e.target.name]:e.target.value}))
  console.log(userData)
}

此 state 還具有來自 API 請求的占位符數據的數組的功能

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

];

這一切都很好，我的數據也有效。 如果我控制台登錄更改，它將在每個輸入上更新。 但是，當我嘗試使用 MUI 文本字段時，這不起作用。

                <TabPanel value={value} index={0}>
                  {userInputDataSchema.map((input) => (
                    <div>
                      {input.id == 9 ?
                      <TextField
                      name="whyWork_1"
                      id="outlined-multiline-static"
                      label="Diversity & Inclusion at Australia Post"
                      multiline
                      rows={15}
                      defaultValue={userData.whyWork_1}
                      fullWidth 
                      fullHeight
                      type={input.type}
                      handleChange={handleChange}
                    /> : null}
                    </div>
                  ))}
                </TabPanel>

我無法弄清楚為什么這些數據沒有正確傳遞給 React state。

誰能看到我的錯誤？

Answer 1

TextField有一個道具defaultValue={userData.whyWork_1} ，幾點-

1. 在 API 響應中沒有whyWork_1字段，這是鍵 label 的值，您的意思是{userData.label}嗎？
2. defaultValue應該用於不受控制的組件。 您應該對受控組件使用value （而不是defaultValue ）。

<TextField
  .....
  value={userData.label}
  .....
/>