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

Question

我在尝试构建另一个 React 应用程序时发现了这个错误。 所以我只是在演示应用程序中询问主要问题，我可能无法在此处更改任何渲染方法，因为它不是实际项目。

以简化形式发布 -> 我正在构建一个应用程序，其中将显示两个count ，并且该计数值旁边将有一个+ button 。 单击该按钮时，计数应增加 1。不幸的是，当我尝试单击该按钮时，该值仅在第一次增加。 之后，价值甚至没有改变。 但是，当我使用 Class 组件实现相同功能时，它会按预期工作。

功能组件

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 组件

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;

应用程序.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;

但是，如果我用普通const变量类型替换该content state 变量并且它按预期工作。

当我不使用任何挂钩来呈现按钮时，下面是有效的。 但这对我的情况没有帮助。

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

我试图创建一些可重复使用的组件，因此我想在返回按钮标签的 state 变量中使用 function，这样我就可以在那里实现一些其他逻辑。

Answer 1

由于您传递的是硬编码的10 ，因此该value将丢失。

我建议将handlePlus简化为：

setCount(c => c + 1);

然后像这样设置onclick ：

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

您的代码将按预期工作，如您在此代码段中所见：

 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>

---

也就是说，我建议从钩子上移除按钮，然后自己渲染它：

 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>

---

请参阅有关c => c + 1语法的React 文档