Question

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

2021-06-15

4188

javascript reactjs ecmascript-6

我正在 React 应用程序中工作，并发现了这个顽固的东西。这是我正在 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：无法读取未定义的属性“split”

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

Answer 2

您可以使用此解决方案：

String(null).replace('null',"");

Abdelilah Zaari

2022-08-30