React Material UI TextField 值未更新答案

【问题标题】：React Material UI TextField value is not updatingReact Material UI TextField 值未更新
【发布时间】：2020-09-09 14:10:18
【问题描述】：

有四个文件：createPollForm.js、formOptions.js、optionList.js、option.js

createPollForm 有一个带有初始值的选项数组的状态：

const [options, setOptions] = useState([{
        id: uuidv4(),
        value: ""
    }]);

const handleOptionsChange = value => {
       setOptions(value);
}

return(
        <FormOptions 
               options={options}
               handleOptionsChange={handleOptionsChange}
        />
)

formOptions.js 从 createPollForm.js 接收 handleOptionsChange ：

const handleValue = id => {
      const result = options.filter(option => option.id === id)
      return result[0].value
}

const handleChangeValue = (e, id) => {
      options.forEach(option => {
          if(option.id === id){
              option.value = e.target.value
          }
      })

      handleOptionsChange(options)
}

return (
     <OptionList 
            options={options}
            handleValue={handleValue}
            handleChangeValue={handleChangeValue}
     />
)

optionList.js 包含所有选项 TextFields

return (
        <div>
            {options.map(option => (
                <Option 
                    key={option.id} 
                    id={option.id}
                    handleValue={handleValue}
                    handleChangeValue={handleChangeValue}
                />
            ))}
        </div>
    )

option.js：

return(
       <TextField 
           label="Option"
           value={props.handleValue(props.id)}
           onChange={e => props.handleChangeValue(e, props.id)}
       />
    )

在option.js的TextField中添加值之前，一切正常，但是，在使用handleValue函数添加值为每个选项TextField分配值之后，TextField将保持blank 当我输入相应的 TextField 时，即使我可以看到 选项数组状态的值 是通过 console.log 更新的。因此，我假设由于某种原因 TextField 无法从选项数组中读取最新的值。

谁能帮我解决这个问题？我刚开始学习 reactjs，任何帮助将不胜感激。

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

在 createPollForm.js 的 handleOptionsChange 方法中。像给定的那样更新状态：

setOptions({...options,value})

因为初始值是对象，而你传递值。

【讨论】：

我将option的数组对象传递给formOptions.js中handleChangeValue()中的handleOptionsChange()