javascript - TypeError: this.state.name.split 不是函数

Question

我是新来的反应，我收到了这个错误。我有三个名为 App、Char、Validation 的 js 文件。Char 组件应该将给定的文本转换为单个字符并显示出来。验证是检查字符长度。

我的错误信息：

  15 | 
  16 | 
  17 | render() {
> 18 |   const charList = this.state.name.split('').map((ch, index) => {
     | ^  19 |     return <Char 
  20 |       character={ch} 
  21 |       key={index} />;

我的 App.js 代码：

import React,{Component} from 'react';
import logo from './logo.svg';
import './App.css';
import Validation from './Validation/Validation'
import Char from './Char/Char';
class App extends Component {
  state = {
    name: []
  };
  InputName = (event) => {
    this.setState({
      name: event.target.value,
    });
  };
  
  
  render() {
    const charList = this.state.name.split('').map((ch, index) => {
      return <Char 
        character={ch} 
        key={index} />;
    });
    
    

    return (
      <div className="App">
        <input onChange={this.InputName}type="text" placeholder="Input text" ></input>
        <p>{this.state.name}</p>
        <Validation length={this.state.name.length} />
        {charList} 
          </div>
    
        );
      }
    }
    
    export default App;

我的 Char.js 代码：

import React from 'react';
const Char=(props)=>
{
  const style ={
    display:'inline-block',
    padding:'16px',
    margin:'16px',
    border:'1px solid black',
    textAlign:'center'

  };
  return(
  <p style={style}> {props.character} </p>)
};

export default Char

我的validation.js 代码：

import React from 'react';

const Validation =(props)=>{
    var ValidationMessage='Text is too short';
    if(props.length>=5)
    {
        ValidationMessage="Text is long";
    }
    return(
    <div className="ankit">
        {ValidationMessage}
    </div>
    )
}
export default Validation;

标签： javascriptreactjs