如何在单击时从状态数组中删除值

Question

目前我正在开发闹钟应用程序，我想以某种方式进行，以便您可以添加多个闹钟。每个警报都存储在 alarms:[] 状态的 App.js 文件中。如果添加了闹钟，我想将该闹钟显示为时钟下的 li 元素，我希望能够通过单击 X[=40= 将其删除] 图标。此外，当当前时间 === 为闹钟设置的时间时，Ring.js 组件呈现并且闹钟开始响起。当闹钟响起时，有'turn off'按钮。单击关闭按钮后，如何从状态数组中删除正在响铃的特定警报？

如果满足条件，我已尝试发送 removeAlarm 函数和警报（这可能有助于确定从数组中删除哪个警报）作为此组件的道具。

function checkTime(){ if(time.alarms[0]){ const alarms = time.alarms.map(function(alarm,i){ if(time.currentHour === alarm.hour && time.currentMinute === alarm.minute && time.currentSecond >= 0){ return <Ring message={alarm.message} key={i} alarm={alarm} removeAlarm={removeAlarm} /> } }) return alarms; } }

移除报警功能：

function removeAlarm(alarm){ setTime(prevState => ({ ...prevState, alarms:[...prevState.alarms.filter(el => el !== alarm)] })) }

Ring.js 文件

let message = props.message; function removeAlarm(alarm){ props.removeAlarm(alarm); } function turnOff(e,alarm){ e.preventDefault(); setShowRing(false); removeAlarm(alarm); } <form> <h3>{message}</h3> <button onClick={turnOff}>TURN OFF</button> </form>

我不知道该怎么做。我不知道如何使用该传递的函数或如何在该 onClick 函数中确定这是必须发送到 removeAlarm 函数的按钮，通过状态映射并删除该特定按钮。

我注意到的第二个问题是 React Spring 转换。我在 Ring.js,Alarm.js 中使用它并且还想用它来列出 ListAlarms.js[= 中的活动警报40=]。我使用它的方式与前两个组件完全相同，但对于 ListAlarms.js 它不起作用，我不明白为什么。我的目标是显示那些带有转换的活动警报，而不仅仅是 'blink' 那里。

谢谢。

CodeSandBoxlinkhere

Answer 1

您正在过滤掉 objects/references 您应该按 id 过滤掉。

你传递的警报参数是一个对象，你的警报过滤器数组包含对象，找到一个你可以过滤的唯一属性，通过查看你的代码，它应该是 id。

像这样：

  function removeAlarm(alarm){
   setTime(prevState => ({
    ...prevState,
    alarms:[...prevState.alarms.filter(el => el.id !== alarm.id)]
   }))
  }

Answer 2

可以进行一些更正，但您必须更改转换

首先你需要按id过滤你的列表，以便正确删除警报。

  function removeAlarm(alarm){
   setTime(prevState => ({
    ...prevState,
    alarms:[...prevState.alarms.filter(el => el.id !== alarm.id)]
   }))
  }

其次，我已经从您的过渡中删除了 from 属性，因为每个新对象都位于其他对象之上。此外，我使用映射到每个项目的 id 的键代替 null。

(item) => item.id

最后我更正了map函数中的顺序

{listAlarmTransitions.map(({ item, props, key }) => (

于是就变成了

  const listAlarmTransitions = useTransition(props.alarms, (item) => item.id, {
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });

  return (
    <ul>
      {listAlarmTransitions.map(({ item, props, key }) => (
        <animated.div key={key} style={props}>
          <li
            key={item.id}
            id={item.id}
            onClick={() => {
              removeAlarm(item);
            }}
          >
            <FontAwesomeIcon icon={faTimesCircle} className="listIcon" />
            <h3>{item.message}</h3>
            <span>
              {item.hour}:{item.minute}
            </span>
          </li>
        </animated.div>
      ))}
    </ul>
  );

检查这个沙箱 https://codesandbox.io/s/broken-morning-upqwp

如何在单击时从状态数组中删除值

How to remove value from state array on click

javascript

components

reactjs

react-state