Javascript 按顺序更改两个状态会引发错误

我正在做一个实验，一旦触发了一个事件，它就会删除输入字符串末尾的点（如果存在的话）；否则，返回整个字符串作为

this.state.output

的值

class App extends React.Component {
    state = {
      input: null,
      output: null
    }

    generateString = (e) => {
      this.setState({
        input: e.target.value
      })  
    }

    removeEndDot = (e) => {
      e.preventDefault();

      const removedDot = /[\.]$/.test(this.state.input) ?
                         this.state.input.slice(0, this.state.input.length - 1).join('') :
                         this.state.input;

      this.setState({
        input: null,
        output: removedDot
      })
    }

    render() {
      const divStyle = {
        border: '1px solid #5f5f5f',
        padding: '0.5rem',
        flex: '1'
      };

      return(
        <div>
          <form action="" onSubmit={this.removeEndDot}>
            <input type="text" onChange={this.generateString} />
            <input type="submit" value="Submit"/>
          </form>
          <div style={{display: 'flex'}}>
            <div style={divStyle}>{this.state.input}</div>
            <div style={divStyle}>{this.state.output}</div>
          </div>
        </div>
      )
    }
  }

（请允许我创建两个状态，而不是仅创建一个状态，这样做很容易。我创建两个状态有自己的原因；此外，这只是一个实验。）

函数

join（）

是在

字符串上调用的，而不是在
数组上调用的


让我们假设

this.state.input = 'foo.';

那你就给我打电话

state.input.slice(0, state.input.length - 1).join();

第一部分是state.input.slice（0，state.input.length-1）
，它将返回
'foo'
。但是，
'foo.join（）
不起作用


const correctUsage=['f'，'o'，'o']；
log（'correct usage-->'）；
console.log（正确使用）；
试一试{
const incorrecusage='foo'。join（''）；
}第（e）款{
console.log（'不正确的用法-->'）；
控制台错误（e）；
}
您试图在字符串上使用函数
.join（“”
）。此方法适用于数组，但不适用于字符串。尝试使用
.substring（）
代替
.slice
给出字符串。为什么要加入（）

？卸下

.join（）

this.state.input

是一个字符串，对其应用

.slice（）

将给出另一个字符串。所以不需要

。在这里加入（…）

。感谢您指出错误：）谢谢！非常感谢：）我不知道

。slice（）

也可以用于字符串。我的朋友很乐意帮忙！如果某个答案确实回答了您的问题，您可以单击“检查”图标接受该答案

state.input.slice(0, state.input.length - 1).join();