我正在尝试做的事情:我正在开发的React应用程序接收两块用户输入的文本,将它们分割成每个30个字符的子串--最终将随机地重新组合这些字符串。这是对文学剪裁技巧的即兴表演。
这就是我要做的:
import React, { useState } from "react";
// import Collage from "./components/collageText/collage";
import "./App.css";
import SrcTxt from "./components/srcTxt/srcTxt";
const App = () => {
const [txt1, setTxt1] = useState("");
const [txt2, setTxt2] = useState("");
const SubmitHandler = (e) => {
e.preventDefault();
setTxt1(e.target.userTxt1.value);
setTxt2(e.target.userTxt2.value);
let cutTxt1 = []
for (let x = 0; x < txt1.length - 31; x + 31){
cutTxt1.push(txt1.slice(x, x+31))
}
console.log(cutTxt1)
};
return (
<div>
<h1>howdy</h1>
<SrcTxt submitted={SubmitHandler} />
</div>
);
};
export default App;问题在于我如何遍历输入的字符串。当我运行代码时,一开始没有任何日志记录到控制台;如果我再次单击submit,它将无限地运行程序。
我很确定我在这里遗漏了一些非常明显的东西。
发布于 2020-09-13 00:42:21
第一次没有任何反应的原因是setTxt1(e.target.userTxt1.value);只会在下一次渲染时更新txt1的值。这意味着变量不是立即定义和使用的。
我建议为你的函数定义一个局部变量,用它做你想做的事情,然后设置你的状态。
const SubmitHandler = (e) => {
e.preventDefault();
const txt1 = e.target.userTxt1.value;
const txt2 = e.target.userTxt2.value;
let cutTxt1 = []
for (let x = 0; x < txt1.length - 31; x += 31){
cutTxt1.push(txt1.slice(x, x+31))
}
console.log(cutTxt1);
setTxt1(txt1);
setTxt2(txt2);
};正如其他人所说,无限循环来自于没有更新x值。在递增x以更新其值时添加+=。
发布于 2020-09-13 00:40:28
看起来你从来没有修改过x。
你可能指的是x += 31而不是x + 31。
https://stackoverflow.com/questions/63862456
复制相似问题