Reactjs 如何在无状态组件中有条件地更新状态？

我有两个部分。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'));

功能按钮（道具）{
const onclick=（）=>{
道具数量增加（道具数量增加）；
};
返回+{props.toBeIncremented}；
}
常量MyLabel=函数（props）{
返回{props.counter}；
};
功能应用程序（道具）{
const[counter，mySetCounter]=React.useState（0）；
常量handleClick=（递增值）=>{
mySetCounter（计数器+递增值）；
};
返回(


);
}
ReactDOM.render（
使用按钮/标签对的本地状态和步骤创建按钮/标签对生成器。生成按钮和标签，并进行渲染：


const useGenerateButtonAndLabel=步骤=>{
const[counter，mySetCounter]=React.useState（0）；
const onclick=React.useCallback(
（）=>mySetCounter（计数器+步进），
[台阶，柜台]
);
返回[
+{step}，
{计数器}
];
};
功能应用程序（道具）{
const[button1，label1]=使用生成按钮和标签（5）；
const[button2，label2]=使用生成按钮和标签（10）；
常量[button3，label3]=使用GenerateButtonAndLabel（15）；
返回(
{button1}
{button2}
{button3}


{label1}
{label2}
{label3}
);
}
ReactDOM.render（，document.getElementById（'demo'）；
这里是另一个使用单个状态变量的解决方案：

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

功能应用程序（道具）{
常量[appState，setAppState]=React.useState([
{value:0，incrementValue:5}，
{value:0，incrementValue:10}，
{value:0，incrementValue:15}
]);
常量handleClick=clickedIndex=>（）=>{
setAppState(
map（（项目，索引）=>clickedIndex！==索引？
项：（{…项，值：item.value+item.incrementValue}）
) 
);
};
返回(
{
map（{value，incrementValue}，index）=>(
));
}


{
appState.map(
（{value}，索引）=>
);
}
);
}
如果您想为每个按钮/标签创建单独的值，您需要创建三个不同的状态值。您正在向所有三个按钮传递相同的状态和处理程序，因此当一个增量时，它将更新所有三个按钮。是的，我的代码错误，请更正我的代码和paste@OlivierBoiss你能纠正我的代码并粘贴到这里吗e> generateButtonAndLabel

是一个自定义挂钩，它应该以

use

开始，否则linter不会检测到它。我不确定它是挂钩。它是一个带有挂钩的react组件生成器。它使用

react.useState

，如果在条件内调用

generateButtonAndLabel

，linter将不会检测到您正在做什么ng错误更新。在这种情况下，命名在概念上仍然很奇怪。@Oridori，谢谢你的代码。除了自动化之外，Christopher Ngo的代码和你的代码之间到底有什么区别？你能告诉我吗..有什么优化的还是什么..只是我有个疑问..谢谢