Как обновить состояние условно в Stateless Component?

Question

У меня есть два компонента.Компоненты MyButton и MyLabel.Я создал 3 Компонента MyButton и 3 Компонента MyLabel.Каждая кнопка имеет различное значение приращения.При нажатии на кнопку соответствующий ярлык должен обновляться не всеми ярлыками.В настоящее время все ярлыки обновляются.

function MyButton(props) {
  const onclick = () => {
    props.onNumberIncrement(props.toBeIncremented);
  };
  return <button onClick={onclick}>+{props.toBeIncremented}</button>;
}

const MyLabel = function(props) {
  return <label>&nbsp;&nbsp;&nbsp;&nbsp;{props.counter}</label>;
};

function App(props) {
  const [counter, mySetCounter] = React.useState(0);

  const handleClick = (incrementValue) => {
    mySetCounter(counter + incrementValue);
  };

  return (
    <div>
      <MyButton
        counter={counter}
        onNumberIncrement={handleClick}
        toBeIncremented={5}
      />
      <MyButton
        counter={counter}
        onNumberIncrement={handleClick}
        toBeIncremented={10}
      />
      <MyButton
        counter={counter}
        onNumberIncrement={handleClick}
        toBeIncremented={15}
      />
      <br />
      <MyLabel counter={counter} />
      <MyLabel counter={counter} />
      <MyLabel counter={counter} />
    </div>
  );
}

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

jsfiddle: нажмите здесь

Answer 1

Создать генератор пар кнопок / меток с их локальным состоянием и шагом.Сгенерируйте кнопки и метки и отобразите их:

const useGenerateButtonAndLabel = step => {
  const [counter, mySetCounter] = React.useState(0);
  
  const onclick = React.useCallback(
    () => mySetCounter(counter + step), 
    [step, counter]
  );

  return [
    <button onClick={onclick}>+{step}</button>,
    <label>&nbsp;&nbsp;&nbsp;&nbsp;{counter}</label>
  ];
};

function App(props) {
  const [button1, label1] = useGenerateButtonAndLabel(5);
  const [button2, label2] = useGenerateButtonAndLabel(10);
  const [button3, label3] = useGenerateButtonAndLabel(15);

  return (
    <div>
      {button1}
      {button2}
      {button3}
      <br />
      {label1}
      {label2}
      {label3}
    </div>
  );
}

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

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="demo"></div>

Если вам также нужна сумма, каждая сгенерированная пара может также вернуть свой текущий counter, и вы можете суммировать их в родительском.В этом примере я также автоматизирую создание / рендеринг элементов с помощью Array.from(), map и lower.

const useGenerateButtonAndLabel = step => {
  const [counter, mySetCounter] = React.useState(0);
  
  const onclick = React.useCallback(
    () => mySetCounter(counter + step), 
    [step, counter]
  );
  
  // step is used here is a key, but if step is not unique, it will fail. You might want to generate a UUID here
  return [
    <button key={step} onClick={onclick}>+{step}</button>,
    <label key={step}>&nbsp;&nbsp;&nbsp;&nbsp;{counter}</label>,
    counter
  ];
};

const sum = items => items.reduce((r, [,, counter]) => r + counter, 0);

function App(props) {
  const items = Array.from({ length: 5 }, 
    (_, i) => useGenerateButtonAndLabel(5 * (i + 1))
  );

  return (
    <div>
      {items.map(([button]) => button)}
      <br />
      {items.map(([, label]) => label)}
      
      <div>Total: {sum(items)}</div>
    </div>
  );
}

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

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="demo"></div>

Answer 2

Вот еще одно решение, использующее одну переменную состояния:

function App(props) {
      const [appState, setAppState] = React.useState([
       {value: 0, incrementValue: 5},
       {value: 0, incrementValue: 10},
       {value: 0, incrementValue: 15}
      ]);

      const handleClick = clickedIndex => () => {
        setAppState(
          appState.map((item, index) => clickedIndex !== index ? 
            item : ({...item, value: item.value + item.incrementValue})
          ) 
        );
      };

      return (
        <div>
         {
           appState.map(({value, incrementValue}, index) => (
            <MyButton
              key={index}
              counter={value}
              onNumberIncrement={handleClick(index)}
              toBeIncremented={incrementValue}
            />
           ));
          }
          <br />
          {
            appState.map(
              ({value}, index) => <MyLabel key={index} counter={value} />
            );
          }
         </div>
      );
}