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

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

獲取“解析錯誤:意外的令牌,預(yù)期的”;”“,同時在以下代碼中生成反應(yīng)應(yīng)用程序

獲取“解析錯誤:意外的令牌,預(yù)期的”;”“,同時在以下代碼中生成反應(yīng)應(yīng)用程序

冉冉說 2022-08-18 16:17:37
所以我正在嘗試創(chuàng)建一個基本的react應(yīng)用程序,因此,在我的應(yīng)用程序中.js文件中,它為我的渲染函數(shù)拋出了一個錯誤,我無法理解為什么。另外,如果錯誤是由于一些愚蠢的事情,請原諒,但我是一個真正的初學(xué)者js,可以真正使用幫助。我一直在關(guān)注YouTube教程。此處顯示的計數(shù)器列表最初是計數(shù)器組件的一部分,但要在另一個非子組件中使用此組件,我必須將其提升到應(yīng)用程序組件,因此我進行了一些復(fù)制粘貼,網(wǎng)站開始拋出此錯誤。代碼如下:function App() {state = {  counters: [{      id: 1,      value: 4    },    {      id: 2,      value: 0    },    {      id: 3,      value: 0    },    {      id: 4,      value: 0    },  ],};handleIncrement = (counter) => {  const counters = [...this.state.counters];  const index = counters.indexOf(counter);  counters[index] = {    ...counter  };  counters[index].value++;  console.log(this.state.counters[index]);  this.setState({    counters  });}handleReset = () => {  const counters = this.state.counters.map((c) => {    c.value = 0;    return c;  });  this.setState({    counters  });}handleDelete = (counterId) => {  const counters = this.state.counters.filter((c) => c.id !== counterId);  this.setState({    counters  });}render() {  return (      <div >    <React.Fragment >    <Navbar/>    <main className = "container" >    <Counters     counters = {      this.state.counters    }    onReset = {      this.handleReset    }    onIncrement = {      this.handleIncrement    }    onDelete = {      this.handleDelete    }    />       </main >     </React.Fragment >    </div>  );}}這給出了以下錯誤消息:/src/App.js  Line 61:12:  Parsing error: Unexpected token, expected ";"         render() {                  ^      return ( <        React.Fragment >       <
查看完整描述

2 回答

?
心有法竹

TA貢獻1866條經(jīng)驗 獲得超5個贊

這是因為您將兩個反應(yīng)組件范例組合在一起。我們沒有函數(shù),您需要以這種方式更改代碼才能使用:renderFunctional ComponentClass Component


class App extends React.Component {

  state = {

    counters: [

      {

        id: 1,

        value: 4

      },

      {

        id: 2,

        value: 0

      },

      {

        id: 3,

        value: 0

      },

      {

        id: 4,

        value: 0

      }

    ]

  };


  handleIncrement = counter => {

    const counters = [...this.state.counters];

    const index = counters.indexOf(counter);

    counters[index] = {

      ...counter

    };

    counters[index].value++;

    console.log(this.state.counters[index]);

    this.setState({

      counters

    });

  };


  handleReset = () => {

    const counters = this.state.counters.map(c => {

      c.value = 0;

      return c;

    });

    this.setState({

      counters

    });

  };


  handleDelete = counterId => {

    const counters = this.state.counters.filter(c => c.id !== counterId);

    this.setState({

      counters

    });

  };


  render() {

    return (

      <div>

        <React.Fragment>

          <Navbar />

          <main className="container">

            <Counters

              counters={this.state.counters}

              onReset={this.handleReset}

              onIncrement={this.handleIncrement}

              onDelete={this.handleDelete}

            />

          </main>

        </React.Fragment>

      </div>

    );

  }

}

或以這種方式使用Functional Component


function App() {

  const [state, setState] = React.useState({

    counters: [

      {

        id: 1,

        value: 4

      },

      {

        id: 2,

        value: 0

      },

      {

        id: 3,

        value: 0

      },

      {

        id: 4,

        value: 0

      }

    ]

  });


  const handleIncrement = counter => {

    const counters = [...state.counters];

    const index = counters.indexOf(counter);

    counters[index] = {

      ...counter

    };

    counters[index].value++;

    console.log(state.counters[index]);

    setState({

      counters

    });

  };


  const handleReset = () => {

    const counters = state.counters.map(c => {

      c.value = 0;

      return c;

    });

    setState({

      counters

    });

  };


  const handleDelete = counterId => {

    const counters = state.counters.filter(c => c.id !== counterId);

    setState({

      counters

    });

  };


  return (

    <div>

      <React.Fragment>

        <Navbar />

        <main className="container">

          <Counters

            counters={state.counters}

            onReset={handleReset}

            onIncrement={handleIncrement}

            onDelete={handleDelete}

          />

        </main>

      </React.Fragment>

    </div>

  );

}


查看完整回答
反對 回復(fù) 2022-08-18
?
江戶川亂折騰

TA貢獻1851條經(jīng)驗 獲得超5個贊

函數(shù)組件中有一個方法。您已經(jīng)將基于類的組件與基于函數(shù)的組件混合在一起。只需返回所需的值,刪除呈現(xiàn)方法(將代碼放在其中,外部),并將其余函數(shù)轉(zhuǎn)換為常量:render()


function App() {

  state = {

    counters: [

      {

        id: 1,

        value: 4

      },

      {

        id: 2,

        value: 0

      },

      {

        id: 3,

        value: 0

      },

      {

        id: 4,

        value: 0

      }

    ]

  };


  const handleIncrement = counter => {

    const counters = [...this.state.counters];

    const index = counters.indexOf(counter);

    counters[index] = {

      ...counter

    };

    counters[index].value++;

    console.log(this.state.counters[index]);

    this.setState({

      counters

    });

  };


  const handleReset = () => {

    const counters = this.state.counters.map(c => {

      c.value = 0;

      return c;

    });

    this.setState({

      counters

    });

  };


  const handleDelete = counterId => {

    const counters = this.state.counters.filter(c => c.id !== counterId);

    this.setState({

      counters

    });

  };


  return (

    <div>

      <React.Fragment>

        <Navbar />

        <main className="container">

          <Counters

            counters={this.state.counters}

            onReset={this.handleReset}

            onIncrement={this.handleIncrement}

            onDelete={this.handleDelete}

          />

        </main>

      </React.Fragment>

    </div>

  );

}


查看完整回答
反對 回復(fù) 2022-08-18
  • 2 回答
  • 0 關(guān)注
  • 148 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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