reactjs - TypeError：无法在渲染视图中读取 null 的属性“投票”

问题描述

在这个组件中，我在属性中获得了一个 Promise 对象，我尝试将其置于状态，但是当视图被渲染时，我收到消息“TypeError：无法读取属性'vote' of null”，要求解决我的问题问题，我花了两个小时，我没有看到结束。我应该怎么做？

    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[]>;
}

标签： reactjstypescriptspfx

解决方案

当您调用时，spfx 组件中的所有错误“TypeError: Cannot read property '......' of null”

this.state.{varname}

或者

this.props.{varname}

解决以下问题之一：

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

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

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

this.state = {};

您使用道具或状态中的值并错过检查它是否为空

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

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(...)}
  );
}

reactjs - TypeError：无法在渲染视图中读取 null 的属性“投票”

问题描述

解决方案

推荐阅读