如何在Change上正确更新material ui textfield并将值放入Json对象

Question

我正在尝试用映射到数组长度的输入字段提供的值更新数组中的title和body对象。实体对象会完全更新，但标题仅使用当前输入值进行更新。例如，如果我尝试键入"；"；。

title对象将改变如下"；标题："；t〃">quot；标题："；h〃"=>quot；标题："；e"；。

期望的输出将是"0"；标题："；t〃">quot；标题："；th">quot；标题："；。

这适用于正文，所以我很困惑为什么它不适用于标题——也许我错过了什么。

export const NewsArticlesPage = () => {
const [newsArticlesJson, setNewsArticlesJson] = useContext(
NewsArticlesContext
)
const [numberOfSteps, setNumberOfSteps] = useState(0)
const stepsMap = Array.apply(
null,
Array(numberOfSteps).fill({ title: '', body: '' })
)
let stepsArray = { ...stepsMap } as StepsMapProps
const updateTileArray = (index: number, titleEventData: string) => {
const stepsArrayData = { ...stepsArray }
stepsArray = {
...stepsArrayData,
[index]: { ...stepsArrayData[index], title: titleEventData },
}
console.log(stepsArray[index])
console.log(stepsArray[index]?.title)
}
const updateRichTextArray = (index: number, richTextEventData: string) => {
const stepsArrayData = { ...stepsArray }
stepsArray = {
...stepsArrayData,
[index]: { ...stepsArrayData[index], body: richTextEventData },
}
console.log(stepsArray[index])
console.log(stepsArray[index]?.body)
}
return (
<NewsArticlesWrapper>
<TextField
type="number"
label="Number of steps"
value={numberOfSteps}
InputProps={{ inputProps: { min: 0 } }}
onChange={(e) => setNumberOfSteps(Number(e.target.value))}
/>
{stepsMap.map((n, index) => (
<>
<Typography key={'heading' + index}>Step: {index + 1}</Typography>
<TextField
key={'title' + index}
type="text"
label="Title"
value={stepsArray[index]?.title}
onChange={(titleEventData) =>
updateTileArray(index, titleEventData.target.value)
}
/>
<ReactQuill
key={'quill' + index}
theme="snow"
value={stepsArray[index]?.body}
modules={modules}
onChange={(richTextEventData) =>
updateRichTextArray(index, richTextEventData)
}
/>
</>
))}
<Button
variant="contained"
colour="primary"
size="medium"
onClick={updateNewsArticleJson}
>
Submit Article
</Button>
</NewsArticlesWrapper>
)
}

如果需要任何额外的信息来帮助我，请询问。

设置代码沙盒以复制问题：https://codesandbox.io/embed/kind-buck-shg2t?fontsize=14&隐藏导航=1&主题=深色

Answer 1

<TextField />和<ReactQuill />输入组件以"受控组件"的方式定义。他们设置/获取值的对象是stepsArray，您已将其创建为普通对象

let stepsArray = { ...stepsMap } as StepsMapProps

这两个组件上的onChange处理程序正在更改此对象上的值

stepsArray = {
...stepsArrayData,
[index]: { ...stepsArrayData[index], title: titleEventData },
}

但是，没有重新渲染，因为React会在状态更改时重新渲染。stepsArray是一个普通的js对象，尽管值在变化，但不会导致重新渲染。这就是为什么，您无法看到在标题<TextField />组件上键入的值。

要解决此问题，请使用useState创建要将值设置/获取到的对象，并相应地使用useState钩子提供的set(State)函数来更新对象内部的值。每当输入的值发生变化时，这将导致重新渲染，因为现在您将更改通过useState的setter函数创建的对象，并且您的UI将与状态同步。