.toUpperCase（）不起作用

Question

I am building a webapp for a class where you can enter in a city and state and it displays the 5 day forecast. Under that it shows you the last three cities you searched for. What I can not figure out is why when I do {this.state.city1.toUpperCase()} does not work.

Any suggestions?

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      city: ``,
      currentState: ``,
      tenDays:[],
      status:``,
      array1 : [],
      array2 : [],
      array3 : [],
      city1: ``,
      city2: ``,
      city3: ``,


    }
    this.handleChange = this.handleChange.bind(this);
    this.cityHandleChange = this.cityHandleChange.bind(this);
    this.go = this.go.bind(this);

  }

  render() {

    return (
      <div className='App'>
        <header className='App-header'>
          &lt;DevWeather /&gt;
        </header>
        <City cityHandleChange = {this.cityHandleChange} city = {this.state.city}/>
        <State handleChange = {this.handleChange} currentState = {this.state.currentState}/>
        <GetWeather go = {this.go}/>
        <h3>{this.state.status}</h3>
        <div className = "weatherCardsContainer">
        {weathercard}
        </div>
        <h3>Recent Searches</h3>
        <div className = "recents">
          <div className = "recentsCard" onClick = {() => {this.inputRecent1()}}>
            <a>{this.state.city1}</a>
          </div>
          <div className = "recentsCard" onClick = {() => {this.inputRecent2()}}>
            <a>{this.state.city2}</a>
          </div>
          <div className = "recentsCard" onClick = {() => {this.inputRecent3()}}>
            <a>{this.state.city3}</a>
          </div>
          {/* {recents} */}
        </div>
      </div>
    )
  }
}
export default App;

Answer 1

toUpperCase is a prototype method defined for a string , if city1 is not a string it will not work, make sure that this.state.city1 is not null or undefined before using toUpperCase . You might need to do the following

 {
     (typeof this.state.city1 === 'string' 
     || this.state.city1 instance of String) 
     ? this.state.city1.toUpperCase() 
     : null
 }

Answer 2

Try changing the default state in the constructor for the items using: `` as the default value (city, status, city1, etc.). Changing them to use regular double or single quotes instead should fix your issue. So `` Should be: "" or ''

Answer 3

As far I see, you have not defined this.handleChange method.

I imagine that you want to have like a history of search.

I'd recommend to write a handler like this:

handleChange(e) {
  e.preventDefault();

  this.setState({
    city: e.target.value,
    history: [...this.state.history, e.target.value]
  });
}

Then you can use lodash to show the last three records in your history array:

{_.times(3).map((i) => ((
  <div
    key={i}
    className="recentsCard"
    onClick={() => {this.inputRecent(i)}}
  >
    <a>{this.state.history[this.state.history.length - i - 1].toUpperCase()}
   </a>
  </div>
))}

I didn't test it. So let me know if you need more help on that.

Good luck!