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不是函数

要摆脱这种令人讨厌的小麻烦，我需要做些什么改变？

Answer 1

没有用于字符串的map方法。

您可以很容易地使其成为数组：

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

React 16：TypeError：this.state.userInput.map不是函数

1 个答案: