React 功能组件 state 变量的 setFunction 在通过另一个 function 引用调用时不起作用

Question

I have found this error while trying to build another React app. So I am only asking the main issue here in a demo app, I might not be able to change any rendering methods here since it is not the actual project.

Issue in simplified form -> I was building a app where two count will be shown and a + button will be there next to that count value. When the button is clicked the count should be increased by 1. Unfortunately when I try to click on the button the value is increasing only the first time. After that the value is not even changing. But when I am implementing the same using Class component its working as expected.

Functional Component

import React, { useState } from "react";

function Page(props) {
    const [count, setCount] = useState(0);

    const [content, setContent] = useState({
        button: (value) => {
            return <button onClick={() => handlePlus(value)}>+</button>;
        },
    });

    function handlePlus(value) {
        console.log("value=", value);
        const data = count + 1;
        setCount((count) => data);
    }

    return (
        <div>
            <span>Functional Component Count = {count}</span>
            {content.button(10)} // 10 will be replaced with another variable
        </div>
    );
}

export default Page;

Class Component

import React, { Component } from "react";

class PageClass extends Component {
    state = {
        count: 0,
        content: {
            button: (value) => {
                return (
                    <button onClick={() => this.handlePlus(value)}>+</button>
                );
            },
        },
    };

    handlePlus = (value) => {
        console.log("value=", value);
        this.setState({ count: this.state.count + 1 });
    };

    render() {
        return (
            <div>
                <span>Class Component Count = {this.state.count}</span>
                {this.state.content.button(10)} // 10 will be replaced with another variable
            </div>
        );
    }
}

export default PageClass;

App.js

import "./App.css";
import Page from "./components/Page";
import PageClass from "./components/PageClass";

function App() {
    return (
        <div className="App">
            <Page />
            <PageClass />
        </div>
    );
}

export default App;

However, If I replace that content state variable with normal const variable type and it is working as expected.

Below is working when I am not using any hooks to render the button. But this is not helpful for my case.

    const content = {
        content: () => {
            console.log(count);
            return <button onClick={() => handlePlus(value)}>+</button>;
        },
    };

I was trying to create some re-usable components and hence I wanted to have that function in state variable which return button tag, so that I can implements some other logic there.

Answer 1

The value will be missing since you're passing a hard-coded 10 .

I'd recommend simplifying the handlePlus to just:

setCount(c => c + 1);

Then set the onclick like so:

<button onClick={handlePlus}>+</button>

And your code will work as expected as you can see in this snippet:

 const { useState } = React; const Example = () => { const [count, setCount] = useState(0); const [content, setContent] = useState({ content: (value) => { return <button onClick={handlePlus}>+</button>; }, }); function handlePlus(value) { setCount(c => c + 1); } return ( <div> <span>{count}</span> {content.content(10)} </div> ); } ReactDOM.render(<Example />, document.getElementById("react"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>

---

That said, I'd recommend removing the button from the hook, and just render it yourself:

 const { useState } = React; const Example = () => { const [count, setCount] = useState(0); function handlePlus(value) { setCount(c => c + 1); } return ( <div> <span>{count}</span> <button onClick={handlePlus}>+</button> </div> ); } ReactDOM.render(<Example />, document.getElementById("react"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>

---

See React documentation about the c => c + 1 syntax