React 应用程序中的递增/递减按钮问题

Question

实际上我想按顺序显示这个名称，但每当我单击递增按钮时，订单（在 useState 中）递增 1，但是当我第一次单击递减按钮时，订单再次递增 1，然后小于 1。

function func() {
  let [getVal, setVal] = useState({
    alerts: "no alerts",
    order: 0,
  });
  
  let Names = [
      "Default",
      "Evil laugh",
      "classic alarm",
      "Pause",
      "intro music",
      "Got item",
      "Old bounce",
      "bark",
      "alarm tone",
    ];

  function slider(e) {
    let { order } = getVal,
    value = e.target.id,
    total = Names.length; 
    if (value === "up" && order !== total - 1) {
      setVal((rest) => ({ ...rest, order:order + 1 })); 
    } else if (value === "down" && order !== 0) {
      setVal((rest) => ({ ...rest, order: order - 1 })); 
    }
    setVal((rest) => ({ ...rest, alerts: Names[order] }));
  }


  return (
    <>
       
        <button
          onClick={slider}
          id="up"
        >
          up
        </button>

        <p>
          {getVal.alerts}
        </p>

        <button
          onClick={slider}
          id="down"
        >down
        </button>
</>
)
}

Answer 1

您需要在slider() function 中进行以下更改。它将解决您的问题。

在 React 中更新 state 是一个异步任务。 你在 if 条件的内部和外部都这样做了。 这就是为什么它没有在第一次点击时减少订单。

  function slider(e) {
    let { order } = getVal,
    value = e.target.id,
    total = Names.length; 

    if (value === "up" && order !== total - 1) {
      setVal((rest) => ({ ...rest, order:order + 1, alerts: Names[order + 1]})); 
    } else if (value === "down" && order !== 0) {
      setVal((rest) => ({ ...rest, order: order - 1, alerts: Names[order - 1] })); 
    }
  }

完整的 React 代码片段：

 import React, { useState } from "react"; function func() { let [getVal, setVal] = useState({ alerts: "no alerts", order: 0, }); let Names = [ "Default", "Evil laugh", "classic alarm", "Pause", "intro music", "Got item", "Old bounce", "bark", "alarm tone", ]; function slider(e) { let { order } = getVal, value = e.target.id, total = Names.length; if (value === "up" && order.== total - 1) { setVal((rest) => ({..,rest: order,order + 1: alerts; Names[order + 1]})). } else if (value === "down" && order.== 0) { setVal((rest) => ({.,:rest, order: order - 1; alerts. Names[order - 1] })); } } return ( <> <button onClick={slider} id="up" > up </button> <p> {getVal.alerts} </p> <button onClick={slider} id="down" >down </button> </> ) }

Answer 2

您的处理程序不需要那么复杂。 我还建议使用数据属性而不是 ID。 我做了一些改变：

1. 对于变量名，它们更有意义 - 当您谈论 arrays index比order更好。

2. state 中不再需要警报。只需将名称加载到 state 中，然后让组件在当前索引处显示名称。

 const { Fragment, useEffect, useState } = React; // Pass in the names as a prop function Example({ names }) { // Add the names to state, and initialise the index const [ state, setState ] = useState({ names, index: 0 }); function handleClick(e) { // Get the id from the button's dataset const { id } = e.target.dataset; // Get the names, and index, from state const { names, index } = state; // Create a new index const newIndex = id === 'down'? index - 1: index + 1; // Set a new state if the newIndex is between 0 // and less than the names array length if (newIndex >= 0 && newIndex < names.length) { setState({...state, index: newIndex }); } } return ( <Fragment> <button data-id="down" onClick={handleClick}>Down</button> <p>{state.names[state.index]}</p> <button data-id="up" onClick={handleClick}>Up</button> </Fragment> ); }; const names=["Default","Evil laugh","classic alarm","Pause","intro music","Got item","Old bounce","bark","alarm tone"]; ReactDOM.render( <Example names={names} />, document.getElementById('react') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>

Answer 3

这是您方法的简化版本。

function func() {
  let [order, setOrder] = useState(0);

  let Names = [
    "Default",
    "Evil laugh",
    "classic alarm",
    "Pause",
    "intro music",
    "Got item",
    "Old bounce",
    "bark",
    "alarm tone"
  ];

  function slider(e) {
    var action = e.target.id,
        total = Names.length;

    if (action === "up" && order !== total - 1) {
      setOrder( order + 1 );
    } else if (action === "down" && order !== 0) {
      setOrder( order - 1 );
    }
  }

  return (
    <div>
      <button onClick={slider} id="up">
        up
      </button>

      <p>{Names[order]}</p>

      <button onClick={slider} id="down">
        down
      </button>
    </div>
  );
}