Question

类型错误：无法在渲染视图中读取 null 的属性“vote”

2020-11-17

71

reactjs typescript spfx

在此组件中，我在属性中获取了一个 Promise 对象，我尝试将其置于状态中，但是在呈现视图时，我收到消息“TypeError：无法读取 null 的属性‘vote’”，要求解决我的问题，我花了两个小时，但我看不到结局。我应该做些什么不同的事情？

    import { IVoteDetailsProps } from "./IVoteDetailsProps";
    import { IVoteDetailsState } from "./IVoteDetailsState";

   export class VoteDetails extends React.Component<IVoteDetailsProps, IVoteDetailsState>{
    constructor(props: IVoteDetailsProps) {
    super();
    console.log(props)

}
componentDidMount() {
    let data = this.props.voteDetails;
    data.then(result => this.setState({
        vote: result
    }));
};
public render(): React.ReactElement<IVoteDetailsState> {
    return (
        <table >
            <tbody>                    
                {this.state.vote && this.state.vote.map(el => {

                    <tr id={el.id.toString()}>
                        <td>{el.title}</td>
                        <td>{el.voteType}</td>
                    </tr>

                })}
            </tbody>
        </table>

    )
  }
}

    export interface IVoteDetailsProps {
        voteDetails: Promise<IVoteDetailsData[]>;
    }

export interface IVoteDetailsData{
    id: number;
    title: string;
    voteType: string;
}

import React = require("react");
import { VoteDetails } from "../VoteDetails/VoteDetails";
import { IVoteListProps } from "./IVoteListProps";


export class VoteList extends React.Component<IVoteListProps, {}> {

    constructor(props: IVoteListProps) {
        super(props);     
        console.log(props)
    }

    public render(): React.ReactElement<IVoteListProps> {
        // const { vote } = this.state;
        return (
            <VoteDetails  voteDetails={this.props.adminServicePanel.getVotesInfo()}  />
        )
    };
}

  public render(): React.ReactElement<IVoteSecurityAppProps> {
    return (
      <main className="ui main text container">
      <VoteList adminServicePanel={this.props.adminPanelService}/>
    </main>

    );

import {HttpClient}  from '@microsoft/sp-http';
import { reject } from 'lodash';
import {IAdminPanelService} from './IAdminPanelService';
import {IReportData} from './IReportData'
import { IVoteDetailsData } from './IVoteDetailsData';
import {IVoteInfo} from './IVoteInfo'
import {VoteOptions} from './VoteOptions';
export class AdminPanelService implements IAdminPanelService {
    
    //////////////////////////////MOCK////////////////////////////////////////////
    private voteInfos : IVoteDetailsData[];
    private reportData : IReportData[];
//////////////////////////////MOCK////////////////////////////////////////////



    constructor(private httpClient: HttpClient, private serverRelativeSiteUrl: string) {
        //MOCK
        this.voteInfos = [
            {
                id : 1,
                title : "xxx",
                voteType : "xx"

            },
            {
                id : 2,
                title : "xxx",
                voteType : "xxx"
            }

        ];
    }

    public getVotesInfo () : Promise<IVoteDetailsData[]> {
        return new Promise<IVoteDetailsData[]>((resolve : (voteMiniInfo : IVoteDetailsData[]) => void, reject : (error: any) => void): void =>{
         
            resolve(this.voteInfos);
        })

    }

}

export interface IAdminPanelService {
    getVotesInfo:() => Promise<IVoteDetailsData[]>;
}

Answer 1

import * as React from 'react';
import styles from './VoteSecurityApp.module.scss';
import { IVoteSecurityAppProps } from './IVoteSecurityAppProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { VoteList } from './VoteList/VoteList';

export default class VoteSecurityApp extends React.Component<IVoteSecurityAppProps, {}> {
  public render(): React.ReactElement<IVoteSecurityAppProps> {
    return (
      <main className="ui main text container">
      <VoteList adminServicePanel={this.props.adminPanelService}/>
    </main>

    );
  }
}

Answer 2

export class VoteDetails extends React.Component<IVoteDetailsProps, IVoteDetailsState> 
{

    state = {
        vote: null,
    }

// change this
componentDidMount() {
    this.props.voteDetails().then(result => this.setState({
        vote: result
    }));
};

    // rest of your codes here

}

export class VoteList extends React.Component<IVoteListProps, {}> {

    constructor(props: IVoteListProps) {
        super(props);     
        console.log(props)
    }

    public render(): React.ReactElement<IVoteListProps> {
        // const { vote } = this.state;
        return (
            <VoteDetails  voteDetails= 
                     {this.props.adminServicePanel.getVotesInfo}  /> // change this line
        )
    };
}

Answer 3

调用

this.state.{varname}

或

this.props.{varname}

时，spfx 组件中的所有错误“TypeError：无法读取 null 的属性‘......’”均可解决以下问题：

在构造函数中添加绑定“this”到出现错误的方法

this.{methodname} = this.{methodname}.bind(this)

您错过了在构造函数中初始化状态（对于 React.Component<props,state>）

this.state = {};

您使用了 props 或 state 中的值，但错过了检查它是否为 null 的提示

在问题中，我看到了所有这些事情。例如，在这段代码中，状态不会被初始化，否则组件就有状态

export class VoteDetails extends React.Component<IVoteDetailsProps, IVoteDetailsState>{
    constructor(props: IVoteListProps) {
            super(props);     
            console.log(props)
            //this.state == null - true
        }
}

第二个问题是这段代码

<VoteDetails  voteDetails={this.props.adminServicePanel.getVotesInfo()}

getVotesInfo- 返回承诺，而不是数据。这种做法不好，使用状态来保存数据，例如

constructor(props: ...){
  super(props);
  this.state{
    data: null
  };
  this._getData = this._getData.bind(this);
}

componentDidMount(){
  this._getData();
}

async _getData(){
  if(this.props.adminServicePanel){
    let data = await this.props.adminServicePanel.getVotesInfo();
    this.setStae({data});
  }
}

render():...{
  const data = this.state.data;
  return(
  {data && data.map(...)}
  );
}