时间戳

首页 > 解决方案 > 在字符串数组中连接字符串变量

reactjs - 在字符串数组中连接字符串变量

问题描述

我有一个字符串数组和一个字符串类型的变量，当我按下步骤向导表单中的下一步按钮时，我想使用从子组件到父组件的回调函数将该变量连接到数组，问题是它没有按我希望的那样工作，即使我做了一个 if 语句，它也会一次又一次地添加相同的变量，我不知道该怎么做才能解决它

父组件函数

  myCallback = () => {

    if (this.state.modules.includes(this.state.moduleTitle)) {

        this.setState({ modules: this.state.modules });
    }
    //works fine when there are no modules
    if (this.state.moduleTitle == "") {
        this.setState({ modules: this.state.modules });
    }
    else {

        this.setState({ modules: this.state.modules.concat(this.state.moduleTitle) })
    }

}

“moduleTitle”是字符串变量，“modules”是字符串数组

子组件

continue = e => {
    e.preventDefault();
   // this.setState({ value: "full" });
    this.props.callbackFromParent();
    this.props.nextStep();

}

continue 函数用于进入表单的下一步

标签： reactjs

解决方案

看起来您需要做的就是moduleTitle通过回调将新的传回：

continue = e => {
    e.preventDefault();
    const currentTitle = this.props.title // or whatever your prop is called
    this.props.callbackFromParent(currentTitle);
    this.props.nextStep();
}

并在另一端处理它：

myCallback = newModuleTitle => {
  const currentModules = this.state.modules
  if (newModuleTitle !== '' && !currentModules.includes(newModuleTitle)) {
    this.setState({ modules: [...currentModules, newModuleTitle] })
  }
}

推荐阅读