Question

我正在做一个实验，一旦触发了一个事件，如果有的话，它将删除输入字符串末尾的点；否则，返回整个字符串作为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>
      )
    }
  }

问题是，每当我输入带有结尾点的输入字符串时，都会引发错误：

_this.state.input.slice（...）。join不是函数

我之所以尝试执行此操作，是因为我认为自己正在同步更改状态，但效果不佳：

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

（请允许我创建两个状态，而不是仅仅为了简单起见。我有自己的理由创建两个状态的原因；此外，这只是一个实验。）

Answer 1

在join()上而不是在String上调用功能Array。

我们假设

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'].join('');

console.log('correct usage ---->');
console.log(correctUsage);

try {
  const incorrectUsage = 'foo'.join('');
} catch(e) { 
  console.log('incorrect usage --->');
  console.error(e);
}

Answer 2

您正在尝试在字符串上使用函数.join("")。此方法适用于数组，但不适用于字符串。尝试改用.substring()

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

2 个答案: