收到错误“TypeError：无法读取未定义的属性'split'”

Question

我在 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

但是当我运行它时，我收到一个错误提示 TypeError: Cannot read property 'split' of undefined

Answer 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);