首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >当我试图遍历一个字符串时,在react中陷入一个无限的for循环

当我试图遍历一个字符串时,在react中陷入一个无限的for循环
EN

Stack Overflow用户
提问于 2020-09-13 00:25:30
回答 2查看 34关注 0票数 0

我正在尝试做的事情:我正在开发的React应用程序接收两块用户输入的文本,将它们分割成每个30个字符的子串--最终将随机地重新组合这些字符串。这是对文学剪裁技巧的即兴表演。

这就是我要做的:

代码语言:javascript
复制
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,它将无限地运行程序。

我很确定我在这里遗漏了一些非常明显的东西。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-09-13 00:42:21

第一次没有任何反应的原因是setTxt1(e.target.userTxt1.value);只会在下一次渲染时更新txt1的值。这意味着变量不是立即定义和使用的。

我建议为你的函数定义一个局部变量,用它做你想做的事情,然后设置你的状态。

代码语言:javascript
复制
  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以更新其值时添加+=

票数 1
EN

Stack Overflow用户

发布于 2020-09-13 00:40:28

看起来你从来没有修改过x

你可能指的是x += 31而不是x + 31

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63862456

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档