亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

我可以在 componentDidMount 中使用“this.props”嗎?

我可以在 componentDidMount 中使用“this.props”嗎?

LEATH 2021-06-30 05:15:58
在 componentDidMount 中selectTodo,將this.props.selected. 在控制臺中,我檢查 selectTodo 是一個包含comments. 我正在嘗試訪問此數組,但出現錯誤:錯誤:未捕獲的類型錯誤:無法讀取未定義的屬性“地圖”class Details extends Component {  constructor() {    super();    this.state = {      resul: []      selectTodo:[]    };   }  componentDidMount() {    axios.get(" http://....../todos")      .then(response => {        this.setState({          resul: response.data,          selectTodo: this.props.selected        });      })      .catch(error => {        console.log('Error fetching and parsing data', Error);      }    );  }  render () {    return (      <div>            {          {               this.state.selectTodo.comments.map((obj, i) => {                return <li>{obj["comment"]}</li>              })              }         }      </div>          );  }}export default Details;控制臺日志 console.log(this.state.selectTodo); return:Object  comments: (2) [{'comment': 'sdsd'}, {'comment': 'sdsdsdsds'}]  id: 1錯誤:未捕獲的類型錯誤:無法讀取未定義的屬性“地圖”
查看完整描述

2 回答

?
慕斯709654

TA貢獻1840條經驗 獲得超5個贊

首先,您在其中定義state和循環的數據render對我來說不太好。我的意思是,您將selecTodo數組定義為 inconstructor并嘗試selectTodo.comments在render方法中獲取。因此,將狀態更改為


    this.state = {

      resul: []

      selectTodo:{comments: []}

    };

并更改您分配數據的componentDidMount方式


  componentDidMount() {

    axios.get(" http://....../todos")

      .then(response => {

        this.setState({

          resul: response.data,

          selectTodo: { comments: this.props.selected.comments }

        });

      })

      .catch(error => {

        console.log('Error fetching and parsing data', Error);

      }

    );

  }

并在 render


  render () {

    if(!this.state.selectedTodo.comments.length) {

      return null;

    }

    return (

      <div>    

        {

          { 

              this.state.selectTodo.comments.map((obj, i) => {

                return <li>{obj["comment"]}</li>

              })  

            } 

        }

      </div>      

    );

  }


查看完整回答
反對 回復 2021-07-01
  • 2 回答
  • 0 關注
  • 277 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號