第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

單擊按鈕時(shí)顯示來自 API 的數(shù)據(jù)。使用 ReactJS

單擊按鈕時(shí)顯示來自 API 的數(shù)據(jù)。使用 ReactJS

拉莫斯之舞 2023-07-06 14:41:08
我試圖在單擊&ldquo;信息&rdquo;按鈕時(shí)顯示每個(gè)字符的數(shù)據(jù)。我知道這是因?yàn)樵趏nButtonClickHandler函數(shù)中它看不到狀態(tài)。我也嘗試過，this.state.person但它給了我一個(gè)錯(cuò)誤，說&ldquo;無(wú)法讀取狀態(tài)&rdquo;。如果我嘗試，state.person它會(huì)給我&ldquo;未定義&rdquo;。最好的方法是什么？謝謝import React from "react";export default class FetchActors extends React.Component {? state = {? ? loading: true,? ? person: null? };? async componentDidMount() {? ? const url = "https://swapi.dev/api/people/";? ? const response = await fetch(url);? ? const data = await response.json();? ? this.setState({ person: data.results, loading: false });? }? render() {? ? if (this.state.loading) {? ? ? return <div>loading...</div>;? ? }? ? if (!this.state.person.length) {? ? ? return <div>didn't get a person</div>;? ? }? ?function onButtonClickHandler(state) {? ? ? console.log(state.person);? ? };? ? return (? ? ? <div>? ? ? ? <h1>Actors</h1>? ? ? ? {this.state.person.map(person =>(? ? ? ? <div>? ? ? ? ? <div>? ? ? ? ? ? {person.name}? ? ? ? ? ? <button onClick={onButtonClickHandler}>Info</button>? ? ? ? ? </div>? ? ? ? </div>? ? ? ? ))}? ? ? ? <button onClick={onButtonClickHandler}>Enter</button>? ? ? </div>? ? );? }}
查看完整描述

4 回答

?
慕哥9229398

TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超6個(gè)贊

如果我錯(cuò)了請(qǐng)糾正我


您看到這種情況的最可能原因是 JavaScript 內(nèi)部的工作方式。語(yǔ)法：


function xyz() {


}

有一個(gè)隱含的this


也許嘗試更改您的代碼：


function onButtonClickHandler(state) {

? console.log(state.person);

};

到：


const onButtonClickHandler = () => {

? console.log(this.state.person);

};

查看完整回答
反對(duì) 回復(fù) 2023-07-06
?
MMTTMM

TA貢獻(xiàn)1869條經(jīng)驗(yàn) 獲得超4個(gè)贊

您已將函數(shù)定義onButtonClickHandler為接受一個(gè)參數(shù)的函數(shù)，并記錄person該參數(shù)的屬性。 函數(shù)中的參數(shù)與組件的參數(shù)state無(wú)關(guān)。state 在 JavaScript 中，它們是兩個(gè)完全不相關(guān)的變量，只是碰巧具有相同的名稱。


function onButtonClickHandler(state) {

? ?console.log(state.person);

};

當(dāng)button調(diào)用時(shí)onClick，它將事件作為參數(shù)傳遞。所以你onButtonClickHandler正在記錄person事件的屬性，這顯然不存在。


由于您沒有使用事件中的任何信息，因此您的函數(shù)不應(yīng)采用任何參數(shù)。正如其他人所說，您還應(yīng)該將此函數(shù)移到方法之外render()，以便不會(huì)在每次渲染時(shí)重新創(chuàng)建它。bind如果您使用箭頭函數(shù)，則不需要使用建議，因?yàn)樗鼈儠?huì)自動(dòng)綁定。


export default class FetchActors extends React.Component {

? /*...*/


? onButtonClickHandler = () => {

? ? ?console.log(this.state.person);

? };


}

里面render()


<button onClick={this.onButtonClickHandler}>Enter</button>

您還可以將函數(shù)內(nèi)聯(lián)定義為不帶參數(shù)的箭頭函數(shù)：


<button onClick={() => console.log(this.state.person)}>Enter</button>

如果您是 React 新手，我建議您學(xué)習(xí)函數(shù)組件而不是類組件。


我試圖在單擊“信息”按鈕時(shí)顯示每個(gè)字符的數(shù)據(jù)。


一旦我們調(diào)用 API，我們就已經(jīng)加載了每個(gè)角色的信息。我們只需要知道要顯示哪一個(gè)即可。expanded您可以向您添加一個(gè)屬性，并使用它來存儲(chǔ)當(dāng)前擴(kuò)展項(xiàng)目的state索引（或id或，無(wú)論您真正想要什么）。name


當(dāng)我們循環(huán)顯示名稱和信息按鈕時(shí)，我們檢查該字符是否是展開的字符。如果是這樣，我們將顯示角色信息。


現(xiàn)在onClick按鈕的處理程序負(fù)責(zé)設(shè)置state.expanded我們單擊它的角色。


{this.state.person.map((person, i) =>(

<div>

? <div>

? ? {person.name}

? ? <button onClick={() => this.setState({expanded: i})}>Info</button>

? ? {this.state.expanded === i && (

? ? ? <CharacterInfo

? ? ? ? key={person.name}

? ? ? ? person={person}

? ? ? />

? ? )}

? </div>

查看完整回答
反對(duì) 回復(fù) 2023-07-06
?
料青山看我應(yīng)如是

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超8個(gè)贊

有幾種方法可以解決您的問題；我會(huì)給你更常見的方法。

  1. 您希望將單擊處理程序定義為類（實(shí)例）方法，而不是將其聲明為渲染方法內(nèi)的函數(shù)（您可以將其定義為渲染方法內(nèi)的函數(shù)，但這可能不是最好的方法超出范圍的各種原因）。

  2. 您還必須將其“this”值綁定到類（實(shí)例），因?yàn)閱螕籼幚沓绦蚴钱惒接|發(fā)的。

  3. 最后，添加一個(gè)按鈕并在單擊時(shí)觸發(fā)獲?。?/p>

class Actors extends React.Component {

  state = {

    loading: false,

    actors: undefined,

  };


  constructor(props) {

    super(props);

    this.fetchActors = this.fetchActors.bind(this);

  }


  async fetchActors() {

    this.setState({ loading: true });

    const url = "https://swapi.dev/api/people/";

    const response = await fetch(url);

    const data = await response.json();

    this.setState({ actors: data.results, loading: false });

  }


  render() {

    console.log('Actors: ', this.state.actors);

    return <button onClick={this.fetchActors}>fetch actors</button>;

  }

}


查看完整回答
反對(duì) 回復(fù) 2023-07-06
?
千萬(wàn)里不及你

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超9個(gè)贊

有時(shí)我需要反應(yīng)一分鐘來加載更新的狀態(tài)。


import React from "react";


export default class FetchActors extends React.Component {

  state = {

    loading: true,

    person: null

  };


  async componentDidMount() {

    const url = "https://swapi.dev/api/people/";

    const response = await fetch(url);

    const data = await response.json();

    if(!data.results) { // throw error }

    this.setState({ person: data.results, loading: false }, () => {

  console.log(this.state.person) // log out your data to verify

});

  }


  render() {

    if (this.state.loading || !this.state.person) { // wait for person data

      return <div>loading...</div>;

    }else{



   function onButtonClickHandler(state) { // just make a componentDidUpdate function

      console.log(state.person);

    };



    return (

      <div>

        <h1>Actors</h1>

        {this.state.person.map(person =>(

        <div>

          <div>

            {person.name}

            <button onClick={onButtonClickHandler}>Info</button>


          </div>


        </div>

        ))}

        <button onClick={onButtonClickHandler}>Enter</button>

      </div>

    );

  }

}}



查看完整回答
反對(duì) 回復(fù) 2023-07-06
  • 4 回答
  • 0 關(guān)注
  • 184 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)