相关疑难解决方法(0)

我这里有这么简单的代码

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [number, setNumber] = useState(0);

  function chaneNumber() {
    setNumber(state => state + 1);
  }

  console.log("here");
  return (
    <div className="App">
      <button onClick={chaneNumber}>Change number</button>
      {number}
    </div>
  );
}

每次单击该按钮时，我都会在控制台中收到 2 个日志，表明该组件呈现两次。我发现一篇帖子说这是关于严格模式的，但我没有启用严格模式。为什么这个组件在每次状态更新时渲染两次？

这是一个可以尝试的代码和框链接。

我制作了一个简单的组件，当单击按钮时，数字状态“a”会增加。

我console.log()在组件内部编写以检查它何时呈现。我希望在console.log单击按钮时执行一次，因为组件的状态已更改。

但是，我错了，console.log()被执行了两次。

有什么问题吗？还是正确的？我错过了什么？

这是我的代码

jsx

import React, {useState} from 'react';

const A = () => {
    const [a, setA] = useState(0);
    const onClick = () => setA(a + 1);
    console.log('render')

    return (
        <div>
            <p>a : { a}</p>
            <button onClick = {onClick}>button</button>
        </div>
    )
}

export default A;

索引.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import A from './components/A';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <A …

我已经开始学习 React，但我无法理解为什么 console.log 会记录两次。下面是我的代码，当我在 chrome 中检查它时，它会显示“随机文本”这个词两次而不是一次。

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0

  };



  render() {
    console.log('random-text');

    return (
      <div>
        <span className={this.getBaadgeClasses()}>{this.formatCount()}</span>
        <button
          onClick={this.handleIncrement}
          className="btn btn-success m-2"
        >
          Increment
        </button>

        {/* <ul>
          {this.state.tags.map((tag) => (
            <li key={tag}>{tag}</li>
          ))}
        </ul> */}
      </div>
    );
  }

  getBaadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { count } = …