时间戳

首页 > 解决方案 > React/Javascript 在实现字典时遇到问题

javascript - React/Javascript 在实现字典时遇到问题

问题描述

我正在尝试在我的 React 项目中实现字典。我猜这是基本的 javascript，所以如果你不熟悉 React，你可能仍然可以提供帮助。

我的目标是拥有一个包含问题的字典，其中每个问题都有一系列答案。我希望能够先添加一个问题，然后再添加答案。

我可以添加记录，但在修改答案数组时遇到问题：

最初的

const [dict, setDict] = React.useState([])

添加字典记录

question = "question1"
const newDict = dict.concat({ key: question1, value: [] });
setDict(newDict);

修改字典值

const answer = "valueToAdd"
const newDict = dict;
newDict["test"].concat(answer);
setDict(newDict);

我收到以下错误。似乎 newDict["test"] 是未定义的，即使我刚刚添加了它。我究竟做错了什么？

TypeError: Cannot read property 'concat' of undefined

另外，这是附加到字典的正确方法吗？我正在这样做，所以字典会重新渲染。

标签： javascriptreactjsdictionary

解决方案

我相信您正在将 dict 状态变量的初始值设置为一个空数组，而不是您可能想要的真正的字典。Javascript 对象的行为与其他语言中的字典非常相似，因此您可能希望为此使用对象。

声明你的状态

const [dict,setDict] = useState({})

在这里，我们将状态（dict）初始化为一个空的 javascript 对象。这些对象的行为类似于您在其他语言中熟悉的字典。

添加键值对

setDict(prevDict => ({...prevDict, newKey: []}))

在这里，我们使用箭头函数为我们将用来更新状态的对象提供先前的状态。这样做是为了保持先前的状态不可变。spread/rest 操作符 "..." 用于收集前一个状态的所有值，然后添加新的键值对

更新值

setDict(prevDict => ({...prevDict, keyToUpdate: [...prevDict.keyToChange, "newValue"]}))

与上述类似，使用了扩展/休息运算符，这次是在两个地方。首先保留先前状态的键，其次保留我们将要添加到的数组中的所有值。

推荐阅读