Javascript ReactJS。钩子的所有部分具有相同状态的不同值

这里有一个程序。按Add按钮可以添加一个按钮。按“显示当前按钮数”可以显示当前按钮数。
但似乎每个按钮都对我们目前有多少个按钮有自己的想法。每个按钮都会“记住”我们在“出生”时的按钮数量，而看不到该状态的当前值。
我希望钩子中的每个元素的state属性

按钮数
都相同。如何做到这一点

import React, { useState, useEffect } from 'react';
import ReactDOM from "react-dom";

var just_key = 50;

class App extends React.Component {               
    render() {
        return (
                <SomeCrazyButtons/>
        );
    }
}

function SomeCrazyButtons() {
    const [number_of_buttons, setButtonsNumber] = useState(1);
    const [some_html, setSomeHtml] = useState([]);

    function addClickNumber() {
        setButtonsNumber(number_of_buttons + 1);
    }

    function showCurrentNumberOfButtons() { 
        console.log("Current number of buttons is " + number_of_buttons);
    }

    useEffect(() => { 
        just_key++;
        console.log("We have " + number_of_buttons + " buttons");
        var new_button = [
            <button key = {just_key + "b"} onClick = {showCurrentNumberOfButtons}>Show current number of buttons</button>
        ];
        var new_buttons = some_html.concat(new_button);
        setSomeHtml(new_buttons);
      }, [number_of_buttons]);

    return (
        <div>
            {some_html}
            <button onClick = {addClickNumber}>Add button</button>
        </div>
    )  
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);


import React，{useState，useffect}来自“React”；
从“react dom”导入react dom；
var just_key=50；
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
函数SomeCrazyButtons（）{
const[按钮数，设置按钮数]=使用状态（1）；
const[somehtml，setSomeHtml]=useState（[]）；
函数addClickNumber（）{
设置按钮数（按钮数+1）；
}
函数showCurrentNumberOfButtons（）{
console.log（“当前按钮数为”+按钮数）；
}
useffect（（）=>{
只要_key++；
log（“我们有”+按钮数量+”按钮）；
var新按钮=[
显示当前按钮数
];
var new_button=some_html.concat（new_button）；
setSomeHtml（新按钮）；
}，[按钮的数量]；
返回(
{some_html}
添加按钮
)  
}
ReactDOM.render(
,
document.getElementById（'root'））
);
不要以状态存储组件。正如您所发现的，由于忘记更新存储的组件以匹配新状态，因此很容易渲染过时的组件。相反，只需存储定义状态所需的最小数据（在本例中为按钮数），并在渲染时创建组件

function SomeCrazyButtons() {
  const [number_of_buttons, setButtonsNumber] = useState(1);

  function addClickNumber() {
    setButtonsNumber(number_of_buttons + 1);
  }

  function showCurrentNumberOfButtons() { 
    console.log("Current number of buttons is " + number_of_buttons);
  }

  const buttons = [];
  for (let i = 0; i < number_of_buttons; i++) {
    buttons.push((
      <button key={i + 'b'} onClick={showCurrentNumberOfButtons}>
        Show current number of buttons
      </button>
    );
  }

  return (
    <div>
      {buttons}
      <button onClick={addClickNumber}>Add button</button>
    </div>
  );
}

函数SomeCrazyButtons（）{
const[按钮数，设置按钮数]=使用状态（1）；
函数addClickNumber（）{
设置按钮数（按钮数+1）；
}
函数showCurrentNumberOfButtons（）{
console.log（“当前按钮数为”+按钮数）；
}
常量按钮=[]；
for（设i=0；i<按钮的数量；i++）{
按钮((
显示当前按钮数
);
}
返回(
{按钮}
添加按钮
);
}
我建议使用
setState
存储按钮数据列表，并在渲染部分迭代该列表，生成html代码^^^^^^^^。我完全同意。将按钮属性放入一个对象中，然后将其推送到所有其他按钮属性的数组中。编写一个方法，将该数组映射到实际的html按钮中。