Question

这是一个程序。通过按添加按钮，您可以添加一个按钮。按下显示当前按钮数量，您可以显示当前按钮数量。
但是似乎每个按钮对我们当前有多少个按钮都有自己的想法。每个按钮都以某种方式“记住”了我们出生时的number_of_buttons，并且看不到该状态的当前值。
我希望状态属性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>
  );
}

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

1 个答案: