javascript - React 16 : TypeError: this. state.userInput.map 不是函数

Question

我有一个简单的 react 应用程序，用户可以输入文本，我想显示输入的字符列表

这是我到目前为止所做的:

    app components 
    import React, { Component } from 'react';
    import './App.css';
    import Char from './Char/Char'


    class App extends Component {
      state ={
        userInput: ''
      }

      handleChange =(e)=>{
this.setState({
  userInput: e.target.value
})
      render() {

        const charList = this.state.userInput.map(char =>{
          return (
            <Char character={char} />
          )
        })

        return (
          <div className="container">
          <div className="App card">
    <input type="text" placeholder="enter a text" 
      value={this.state.userInput} onChange={this.handleChange}></input>
      <p>Paragraph: {this.state.userInput}</p>

          {charList}

          </div>
        </div>
        );
      }
    }

    export default App;

这里是Char组件

import React from 'react'

const Char =(props) =>{

        const divStyle = {
            display: 'inline-block',
            margin: '16px',
            border: '1px solid pink',
            padding: '16px', 
            textAlign: 'center',
            backgroundColor: 'orange'

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

export default Char;

所以当我运行应用程序时，出现以下错误

TypeError: this.state.userInput.map is not a function

我需要更改什么才能摆脱这个令人讨厌的小错误？

Answer 1

没有map字符串的方法。

你可以很容易地把它变成一个数组:

this.state.userInput.split('').map(c => <Char character={c} />);