React＆Typescript：無法讀取未定義的屬性“ 0”

Question

我最近從.jsx移到.tsx，但遇到了一些問題（在移入打字稿之前，一切正常。） 第一個錯誤在行上：“ <Modal show={this.state.isOpen[key]} onClose={this.handleToggleModal.bind(__this,key)}> ”。 我懷疑有與打字稿有關的東西，但我不知道是什么。 有人可以幫助我嗎？

// TaskCard.tsx

//Dependencies
import * as React from 'react';

//Copmponents
import Modal, {ModalProps} from './Modal';
import Input from './Input';
import {IBoard} from './Board';
import PostComment from './PostComment';

export interface IComments{
    body: string,
    from: string,
    date: string,
    hour: string
}

export interface ITask{
    board: string,
    duedate: string,
    tag: string,
    tagClass: string,
    tagText: string,
    body: string,
    risk: string,
    responsable: string
    comments: IComments[]
}

export interface TaskProps{
    tasks: ITask[]
    boards: IBoard[]
}

export interface TaskState{
    isOpen: {}
}

class TaskCard extends React.Component<TaskProps, TaskState>{
    constructor(props) {
        super(props);

        this.state = { 
            isOpen: props.isOpen
        };
    }

    handleToggleModal(key) {
        this.state.isOpen[key] = !this.state.isOpen[key];
        this.setState(this.state.isOpen);
    }

    render(){
        const { tasks, boards } = this.props;
        let __this = this;

        return(
            tasks && tasks.map(
                (tasks, key) =>
                <div key={key} className="v-margin no-margin-top card-contour medium" onClick={this.handleToggleModal.bind(__this,key)}>
                    <div className="row middle-xs caption">
                        <div className="col-xs-6 no-padding">
                            <div className="row middle-xs">
                                <img className="img_icn no-padding-left" src="./assets/img/icn_calendar.svg" alt=""/>
                                <p className="txt-tertiary-color">{tasks.duedate}</p>
                            </div>
                        </div>
                        <div className="col-xs-6 no-padding">
                            <div className="row end-xs middle-xs">
                                <div className={tasks.tagClass + " tag tag_box center-align"}>
                                    <p>{tasks.tag}</p>
                                    <span className="tag_hint">{tasks.tagText}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="row middle-row v-padding">
                        <p>{tasks.body}</p>
                    </div>
                    <div className="row middle-xs caption">
                        <div className="col-xs-9 no-padding">
                            <div className="row middle-xs">
                                <img className="img_icn no-padding-left" src="./assets/img/icn_target.svg" alt=""/>
                                <p className="txt-tertiary-color">Riesgos: {tasks.risk}%</p>
                            </div>
                        </div>
                        <div className="col-xs-3 no-padding">
                            <div className="row middle-xs end-xs">
                                <img className="img_icn no-padding-left" src="./assets/img/icn_comments.svg" alt=""/>
                                <p className="txt-tertiary-color">{tasks.comments.length}</p>
                            </div>
                        </div>
                    </div>
                    <Modal show={this.state.isOpen[key]} onClose={this.handleToggleModal.bind(__this,key)}>
                        <div className="modal_container">
                            <section className="modal_section">
                                <div className="row middle-xs no-margin-left no-margin-right modal_section_title">
                                    <object width="20px" height="20px" data="./assets/img/icn_objetive-blue.svg"></object>
                                    <div className="col-xs start-xs">
                                        <h4 className="semi-bold">Objetivo</h4>
                                    </div>
                                </div>
                                <div className="col-xs-12 modal_section_content">
                                    <p>{tasks.body}</p>
                                </div>
                            </section>
                            <section className="modal_section">
                                <div className="row middle-xs no-margin-left no-margin-right modal_section_title">
                                    <object width="20px" height="20px" data="./assets/img/icn_target-blue.svg"></object>
                                    <div className="col-xs start-xs">
                                        <h4 className="semi-bold">Target</h4>
                                    </div>
                                </div>
                                <div className="col-xs-12 modal_section_content">
                                    <p>Riesgos / Problemas = {tasks.risk}%</p>
                                    <div className="table v-margin">
                                        <div className="row middle-xs">
                                            <div className="col-xs">
                                                <p className="table_head">Fecha de vencimiento</p>
                                                <p className="table_body">{tasks.duedate}</p>
                                            </div>
                                            <div className="col-xs">
                                                <p className="table_head">Tipo de objetivo</p>
                                                <p className="table_body">{tasks.tagText}</p>
                                            </div>
                                            <div className="col-xs">
                                                <p className="table_head">Responsable</p>
                                                <p className="table_body">{tasks.responsable}</p>
                                            </div>
                                            <div className="col-xs-12 v-margin no-margin-bottom">
                                                <p className="table_head">Estado de objetivo</p>
                                                <div className="row middle-xs">
                                                    {
                                                        boards && boards.map(
                                                        (boards, board) =>
                                                        <div key={board} className="col-xs-3">
                                                            <Input name="state" type="radio" classNameCustom="input_radio"
                                                            checked={boards.id == tasks.board} value={boards.id} id={boards.id}/>
                                                            <label htmlFor={boards.id}>{boards.name}</label>
                                                        </div>
                                                        )
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>
                            <section className="modal_section">
                                <div className="row middle-xs no-margin-left no-margin-right modal_section_title">
                                    <object width="20px" height="20px" data="./assets/img/icn_activity-blue.svg"></object>
                                    <div className="col-xs start-xs">
                                        <h4 className="semi-bold">Actividad</h4>
                                    </div>
                                </div>
                                <div className="col-xs-12 modal_section_content">
                                    {
                                        tasks.comments.length!=0 ?(
                                            tasks.comments.map((comments, i) => {
                                                return(
                                                    <div key={i} className="comment">
                                                        <div className="comment_box">
                                                            <p>{comments.body}</p>
                                                        </div>
                                                        <div className="comment_data row no-margin middle-xs">
                                                            <div className="col-xs start-xs">
                                                                <p>{comments.from}</p>
                                                            </div>
                                                            <div className="col-xs end-xs">
                                                                <p>{comments.date} a las {comments.hour} hs.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        ):null                                
                                    }
                                </div>
                            </section>
                        </div>
                        <PostComment />
                    </Modal>
                </div>
            )
        )
    }
}

export default TaskCard;

這是模態組件

//Modal.tsx file
//Dependencies
import * as React from 'react';

export interface ModalProps{
    onClose: any,
    show: boolean,
    children: any
}

export default class Modal extends React.Component<ModalProps>{
    handleStopPropagation = (e) =>{
        e.stopPropagation();
    }

    render(){
        const {onClose, show, children} = this.props;

        // Render nothing if the "show" prop is false
        if(!this.props.show) {
            return null;
        }

        return (
            <div className="modal_bkg" onClick={this.handleStopPropagation}>
                <div className="modal_bkg_container row middle-xs center-xs">
                    <div className="modal card">
                        <div className="right-align modal_close">
                            <button className="btn btn_close" onClick={this.props.onClose}>x</button>
                        </div>
                        {this.props.children}
                    </div>
                </div>
            </div>
        );
    }
}

Answer 1

目前，我無法運行代碼，但據我TaskCard.render函數正在使用Array.map函數，該函數正在為每個任務項目執行回調函數。

這是一個問題，因為在回調中this不是您認為的this :)。 根據文檔： https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map，您可以使用接受this地圖重載。

我相信，如果你這樣做

return(tasks && tasks.map(
            (tasks, key) => <div>put your component markup here</div>,
            this)
      );

在TaskCard.render函數中，您應該不再看到該錯誤。

Answer 2

一個朋友幫了我這個忙，現在可以了。 第一個問題是啟動時始終未定義狀態“ isOpen”，因此這就是運行時引發錯誤“無法讀取未定義的屬性'0'”的原因。 因此，現在，“ isOpen”是並且為空對象，最終的構造函數如下所示：

constructor(props) {
    super(props);

    this.state = { 
        isOpen: {}
    };
}

此后，另一個錯誤是“ boards.map不是函數”，這是因為我將數組“ boards”作為對象傳遞了。 換“木板”就足夠了。 所以最終的代碼是：

boards && boards.map(
    (board, key) =>
    <div key={key} className="col-xs-3">
       <Input name="state" type="radio" classNameCustom="input_radio"
       checked={board.id == task.board} value={board.id} id={board.id}/>
       <label htmlFor={board.id}>{board.name}</label>
    </div>
)

無論如何，感謝您嘗試幫助我。 問候！