SPFX Webpart与React。不能设置自己的类状态

Question

我有一个应用程序，应该从一个开放的api中获取一些位置天气数据。用户可以输入位置。

我有两个文件WeatherAppWebPart.ts和WeatherApp.tsx。

我的问题是，我不能在WeatherApp.tsx中设置自己的状态，只能使用上面传递给我的类的属性（但不能设置自己的状态并在我的类中使用它们作为道具）。

例如，当我使用this.state.date时，我得到错误信息。

Property 'date' does not exist on type 'Readonly<{}>'.

为什么会这样？

WeatherAppWebPart.ts。

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField,
  PropertyPaneCheckbox,
  PropertyPaneDropdown,
  PropertyPaneToggle,
  PropertyPaneButton,
  PropertyPaneButtonType
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import getWeatherData from './getWeatherData';

import * as strings from 'WeatherAppWebPartStrings';
import WeatherApp from './components/WeatherApp';
import { IWeatherAppProps } from './components/IWeatherAppProps';

export interface IWeatherAppWebPartProps {
  description: string;
  status: number;
  test: string;
  test1: boolean;
  test2: string;
  test3: boolean;
  weatherData: any;
}

export default class WeatherAppWebPart extends BaseClientSideWebPart <IWeatherAppWebPartProps> {

  public render(): void {
    const element: React.ReactElement<IWeatherAppProps> = React.createElement(
      WeatherApp,
      {
        description: this.properties.description,
        status: this.properties.status,
        weatherData: this.properties.weatherData
      }
    );

    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: 'Bitte geben Sie den Ort ein:'
                }),
                PropertyPaneButton('weatherButton',  
                 {  
                  text: "Daten anfordern",  
                  buttonType: PropertyPaneButtonType.Normal,  
                  onClick: () => getWeatherData(this.properties.description)
                  .then(data => {
                    console.log("Data:", data);
                    this.properties.status = data.status;
                    this.properties.weatherData = data;
                  })
                 }), 
              ]
            }
          ]
        }
      ]
    };
  }
}

函数getWeatherData.TSX: 在我的类中，我没有设置自己的状态和使用道具，例如，当我使用this.state.date时，我得到错误信息：为什么会这样？

import axios from 'axios';
axios.defaults.headers.post['Content-Type'] ='application/json;charset=utf-8';
axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
const apiKey = 'cf6d62de8a7d61a47748214306d35d4e';
let cityName = '';
let apiEndpoint = `http://api.openweathermap.org/data/2.5/weather?q=${cityName}&APPID=${apiKey}`;

export default async function getWeatherData(cityName) {
    apiEndpoint = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&APPID=${apiKey}`;
  try {
    const response = await axios.get(apiEndpoint);
        return response;
  } catch (error) {
        return error;
  } finally {
        console.log("Function getWeatherData() executed")
    }
}

WeatherApp.tsx:

import * as React from 'react';
import styles from './WeatherApp.module.scss';
import { IWeatherAppProps } from './IWeatherAppProps';
import { escape } from '@microsoft/sp-lodash-subset';
import getWeatherData from '../getWeatherData';

export default class WeatherApp extends React.Component<IWeatherAppProps, {}> {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  public render(): React.ReactElement<IWeatherAppProps> {
    console.log("This:", this);
    let weatherResponse;
    if (this.props.status === 200) {
      console.log("Status state:", this.props.status);
      // weatherResponse = <div>{this.state.status}</div>
    } else {
      weatherResponse = <div>Noch keine Daten.</div>
    }
    return (
      <div className={ styles.weatherApp }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint Weather App!</span>
              <p className={ styles.subTitle }>Get Weather data from different locations.</p>
              <h2>Es ist {this.state.date.toLocaleTimeString()}.</h2>

              <p className={ styles.description }>{escape(this.props.description)}</p>

              <button className={ styles.button } onClick={() => getWeatherData(this.props.description).then(data => {
                console.log("Data Status:", data.status);
                this.setState({status: data.status});
                this.setState({weatherData: data});
              })}>Get Data</button>
              <div id="response">
                {weatherResponse}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Answer 1

试着改一下

export default class WeatherApp extends React.Component<IWeatherAppProps, {}>

到

export default class WeatherApp extends React.Component<IWeatherAppProps, any> .