Javascript 从状态中存储的数组中删除项，删除按钮（第55行）是否缺少参数？

代码是在应用程序组件（我知道这是坏的）的帮助将不胜感激。我不知道我在做什么。除“删除”按钮外，所有功能都可以正常工作，该按钮试图在添加某个项目后将其从列表中删除，但无法识别该项目。他们要求我补充更多细节，但我真的不知道还能说些什么

    import React, {useState, useEffect} from 'react';
    import './App.css';
    
    function App() {
      const [memories, setMemories] = useState([]);
      const [newItem, setNewItem] = useState('');
      const dateAndTime = new Date();
      const dateString = dateAndTime.toLocaleDateString();
      const [allowSubmit, setAllowSubmit] = useState(false);
    
      const handleSubmit = (evt) => {
        evt.preventDefault();
        if (allowSubmit === true) {
          setMemories([...memories,{
            id : memories.length,
            value : newItem,
            date : dateString
          }]);
          setNewItem('');
          setAllowSubmit(false);
          }
        }
      const clearAllMemories = () => {
        setMemories([]);
        localStorage.setItem('memories',JSON.stringify(memories));
      }
      useEffect(() => {
        const memoriesData = localStorage.getItem('memories');
        if (memoriesData) {
          setMemories(JSON.parse(memoriesData));
        }
      },[]);
      useEffect(() => {
        localStorage.setItem('memories',JSON.stringify(memories));
      });
      return (
        <div className='App'>
          <h2>Favorite moments of the day</h2>
          <form onSubmit={handleSubmit}>
            <textarea className='text-area'
              type='text'
              value={newItem}
              onChange={e => {
                setAllowSubmit(true);
                setNewItem(e.target.value)
              }}
              />
            <input className='input-button'type="submit" value="Add Memory"/>
          </form>
          <h3 className='memories-title'>Memories</h3>
          <div className='memories'>
            <ul className='ul'>
              {memories.map(memories => (
              <li key = {memories.id}>{memories.date}{memories.value}
               <button onClick={() => {
                setMemories(memories.value.split(memories.value, 1));
               }}>delete</button>
              </li>
              ))}
            </ul>
          </div> <br/>
          <button className='clear-button'
           onClick={clearAllMemories}
          >
            Clear All Memories
          </button>
        </div>
        );
      }
    export default App;

import React，{useState，useffect}来自“React”；
导入“/App.css”；
函数App（）{
const[memories，setMemories]=useState（[]）；
const[newItem，setNewItem]=useState（“”）；
const dateAndTime=新日期（）；
const dateString=dateAndTime.toLocaleDateString（）；
const[allowSubmit，setAllowSubmit]=useState（false）；
常量handleSubmit=（evt）=>{
evt.preventDefault（）；
如果（allowSubmit==真）{
设置记忆（[…记忆{
id:memories.length，
值：newItem，
日期：dateString
}]);
setNewItem（“”）；
setAllowSubmit（false）；
}
}
常量clearAllMemories=（）=>{
setMemories（[]）；
setItem（'memories'，JSON.stringify（memories））；
}
useffect（（）=>{
const memoriesData=localStorage.getItem（'memories'）；
如果（内存数据）{
setMemories（JSON.parse（memoriesData））；
}
},[]);
useffect（（）=>{
setItem（'memories'，JSON.stringify（memories））；
});
返回(
一天中最喜欢的时刻
{
setAllowSubmit（真）；
setNewItem（如target.value）
}}
/>
回忆

{memories.map（memories=>(
{memories.date}{memories.value}
{
setMemories（memories.value.split（memories.value，1））；
}}>删除

))}



清除所有记忆
);
}
导出默认应用程序；

我发现了一些问题

<ul className='ul'>
  {memories.map(memories => (
  <li key = {memories.id}>{memories.date}{memories.value}
    <button onClick={() => {
       setMemories(memories.value.split(memories.value, 1));
       }}>delete</button>
  </li>
  ))}
</ul>

{memories.map（memories=>(
{memories.date}{memories.value}
{
setMemories（memories.value.split（memories.value，1））；
}}>删除

))}

将

map

函数与

memories

数组一起使用时，将数组的名称指定给数组元素。然后在按钮的

onClick

回调上访问

memories.value.split

（尽管仍然没有多大意义），希望访问数组，但可能访问数组元素

您应该为数组元素指定不同的名称，如

memory

或

memoryElement

，以避免混淆

---

调用

split

函数时（从参数来看，我认为您是想编写

splice

），您可以直接在

内存

数组中调用它，而不是

内存。value

我不知道我是否已经很好地理解了这个问题，但这可能是一个解决方案

<ul className='ul'>
  {memories.map(memory => (
  <li key = {memory.id}>{memory.date}{memory.value}
  <button onClick={() => {
   setMemories([...memories.filter(m => memory.id !== m.id)]);
   }}>delete</button>
  </li>
  ))}
</ul>

{memory.map（内存=>(
{memory.date}{memory.value}
{
setMemories（[…memories.filter（m=>memory.id！==m.id）]；
}}>删除

))}

添加信息，说明为什么它不起作用，特别是您看到的错误行为，是否有任何错误，如果有，具体的错误消息是什么，出现了什么行，等等。说“它不起作用”并不是很有用。至于您的实际问题，您将

记忆

视为一个对象，多次引用

记忆.value

。但是，

内存

是一个数组。另外，数组没有

.split

方法，如果要删除具有该特定值的对象，请使用

.filter

，例如

设置内存（memory.filter（memory=>memory.value！==value））