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

【问题标题】：React - For Loop conditional render - not working and infinite triggerReact - For Loop 条件渲染 - 不工作和无限触发
【发布时间】：2023-03-06 20:03:01
【问题描述】：

我正在尝试根据类似这样的变量在我的渲染中动态多个项目

<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 = abc
multiple = 2

resulting render should look like:
abc + abc +

在渲染之前将我的道具连接成一个字符串会导致它看起来像这样而不是上面的块吗？

{props.base1} + {props.base1} +

问题 2：编辑另外，由于某种原因，<Multiple> 组件中的所有内容都在无限触发，我也不明白为什么会发生这种情况

【问题讨论】：

标签： javascript reactjs

【解决方案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 应该可以工作，您应该在组件中记录该值并检查一次。

【讨论】：

如我帖子底部的例子所示，multiple是一个数字
我确实记录了值，循环运行并且我 console.log(i)，但是中的所有内容都在无限循环，所以我不断地控制台记录“测试”和for循环
你在哪里记录 props.multiple 的值？它在循环之上吗？您可以评论循环并添加console.log('mutliple', props.multiple) 并查看它打印的内容。
引用整个const Multiple = (props) => {... 块。我最初措辞错误，更准确地说，组件中的每个 console.log 都在我的控制台中无限打印

【解决方案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)

【讨论】：

我最初措辞错误，它不仅仅是无限循环的for循环。我在组件中的所有 console.log 语句都无限地记录在我的控制台上。
@Jeffrey 要解决您的问题，请提供有关父组件的更多信息。仅凭提供的信息很难判断。
TBH 同意，我通常不喜欢使用 stackOverflow，因为它很难解释一个问题而实际上无法显示问题
为了解释您的问题，提供有关您的父组件的信息会很有帮助。不过，最好换个帖子。

【解决方案3】：

一个。更改为result.concat('${props.base1} + ');（反引号！！）

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

【讨论】：

right..result = result.concat('${props.base1} + ');