Question

我正在为您可以进入城市和州的班级构建一个webapp，它会显示5天的预测。在此之下，它会显示您搜索的最后三个城市。我无法弄清楚为什么当我这样做 {this.state.city1.toUpperCase（）}不起作用。

有什么建议吗？

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是为prototype method定义的string，如果city1 不是字符串则无法使用，请确保{在使用this.state.city1之前，{1}}不是null或undefined。您可能需要执行以下操作

toUpperCase

Answer 2

尝试使用以下内容更改项目构造函数中的默认状态： } 作为默认值（city，status，city1等）。将它们更改为使用常规的双引号或单引号应该可以解决您的问题。所以 `` 应该： `` 要么 ""

Answer 3

据我所知，您尚未定义this.handleChange方法。

我想你想要有一个搜索历史。

我建议写一个像这样的处理程序：

handleChange(e) {
  e.preventDefault();

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

然后，您可以使用lodash显示历史数组中的最后三个记录：

{_.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>
))}

我没有测试过。如果您需要更多帮助，请告诉我。

祝你好运！

.toUpperCase（）不起作用

3 个答案: