收到错误“类型错误:无法读取未定义的属性‘拆分’”

时间:2021-06-15 20:25:47

标签: javascript reactjs ecmascript-6

我在 React 应用程序工作并创建了这个顽固的东西。 这是我正在处理的反应状态

const [state, setState] = useState({
selectedParagraph: "Hello World!",
testInfo: [],
});

现在我通过将 selectedParagraph 附加到其中来更改 testInfo 的状态。

const selectedParagraphArray = state.selectedParagraph.split("");   // string into array                                                                        
const testInfoArray = selectedParagraphArray.map((selectedLetter) => {
  return {
    testLetter: selectedLetter,
    status: "notAttempted",
  };
});                                               //creating an array of object
                       
setState({ testInfo: testInfoArray });            //Changing state of testInfo

但是当我运行它时,我收到一个错误提示 类型错误:无法读取未定义的属性“拆分”

1 个答案:

答案 0 :(得分:1)

您似乎将 useState 与类组件的状态混淆了。

运行 setState({ testInfo: testInfoArray }); 将整个状态设置为 { testInfo: testInfoArray },完全删除 state.selectedParagraph,使其变为 undefined

您需要多次使用 useState,如下所示:

const [selectedParagraph, setSelectedParagraph] = useState("Hello World!");
const [testInfo, setTestInfo] = useState([]);

并像这样编辑:

const selectedParagraphArray = selectedParagraph.split("");
const testInfoArray = selectedParagraphArray.map((selectedLetter) => {
  return {
    testLetter: selectedLetter,
    status: "notAttempted",
  };
});

setTestInfo(testInfoArray);