React - For Loop 条件渲染 - 不工作和无限触发

Question

我正在尝试基于像这样的可变类型在我的渲染中动态地多个项目<div>  <Multiple    multiple={props.multiple}    base1={props.base1}    exp1={props.exp1}  /></div>const Multiple = (props) => {    let result = "";    let wtf = "";    console.log("test"); // gets triggered    for(let i = 0; i < props.multiple; i++){        console.log("i: "+i); // gets triggered        result.concat("{props.base1} +"); // this doesn't work for some reason        wtf = i; // gets triggered    }    console.log("result: "+result); // result is blank    console.log("wtf:" +wtf);    return <span>{result}</span>;}问题 1：即使我进入了 for 循环，我的结果也没有改变，我不明白为什么。另外因为我还不能让它工作，我想问：如果我这样做，我将 {props.base1} 作为字符串连接起来，当我在渲染中返回它时，它会显示为“{ props.base1}" 还是会呈现为变量值？这是一个关于它应该是什么样子的例子：base1 = abcmultiple = 2resulting render should look like:abc + abc +在渲染之前将我的道具连接成一个字符串会导致它看起来像这样而不是上面的块吗？{props.base1} + {props.base1} +问题 2：还编辑，由于某种原因，<Multiple>组件中的所有内容都在无限触发，我也不明白为什么会这样

Answer 1

您正在使用 concat，它不会更新原始字符串，而是创建一个新字符串。你可以做的是

let result = '';

for(let i = 0; i < props.multiple; i++) {

  console.log("i: "+i); // gets triggered

  result += `${props.base1} `; 

  wtf = i; // gets triggered

}

console.log(result);

就无限循环问题而言，究竟是什么props.muitlple？是数组还是字符串？如果是这样，您应该将循环更改为

for(let i = 0; i < props.multiple.length; i++)

编辑：如果 props.multiple 是一个数字，i < props.multiple应该可以工作，您应该在组件中记录该值并检查一次。

Answer 2

结果字符串未正确附加到

const Multiple = (props) => {

    let result = "";

    let wtf = "";

    

    for(let i = 0; i < props.multiple; i++){

        result += props.base1.toString() + "+"

   

    }

    console.log("result: "+result); 

    return <span>{result}</span>;

}

对于无限循环，我会在进入循环之前检查它的值，以确保您的边界设置正确。

// add this line before for loop

console.log(props.multiple)

Answer 3

A。更改为result.concat('${props.base1} + ');（后背！！）

b. 我认为你传递给的道具可能有问题<Multiple ... >。再次检查它们的值，也许记录它们的值。