javascript - react 。钩子(Hook)的所有部分具有相同状态的不同值

Question

这是一个程序。通过按添加按钮，您可以添加一个按钮。按下显示当前按钮数，您可以显示当前按钮数。
但似乎每个按钮都有自己关于我们目前有多少个按钮的想法。每个按钮都会以某种方式“记住”我们在它“出生”时拥有的 number_of_buttons，并且看不到该状态的当前值。
我希望 Hook 中的每个元素的状态属性 number_of_buttons 都相同。如何做到这一点？

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')
);

Answer 1

不要在状态中存储组件。正如您所发现的，这是一种结束渲染陈旧组件的简单方法，因为您忘记更新存储的组件以匹配新状态。相反，只需存储定义状态所需的最少数据(在本例中为按钮的数量)，并在渲染时创建组件。

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>
  );
}