我正在尝试做一个购物篮应用程序，我想在其中显示警报并希望它在 2 秒后消失

Posted 2023-03-17

【中文标题】我正在尝试做一个购物篮应用程序，我想在其中显示警报并希望它在 2 秒后消失

【英文标题】：I am trying to do a grocery basket application where I want to show an alert and want it to disappear after 2 seconds

【发布时间】：2021-08-19 22:55:01

【问题描述】：

如果您在下面看到，有一个名为 TimeOut() 的组件，我在其中使用 useEffect() 来设置警报的计时器。 然后我在if(!name) 内部的handleSubmit() 函数内部调用<TimeOut/>。我在调用 <TimeOut/> 时收到一个错误“预期一个赋值或函数调用，而是看到一个表达式”。

import React,  useState, useEffect  from 'react'
import List from './List'
import Alert from './Alert'

function App() 
const [name, setName]= useState('');
const [list, setList] = useState([]);
const [isEditing, setIsEditing] = useState(false);
const [editID, setEditID] = useState(null);
const [alert, setAlert ] = useState(show: false, msg:'', type:'');

const TimeOut =()=>
  useEffect(() => 
    setInterval(() => 
      // type in message here
      setAlert(show:true, msg:'testing this will be displayed with name', type:'')
    , 2000);
  , []);
  return <div></div>;



const handleSubmit = (e) => 
    e.preventDefault();
    if (!name) 
      // console.log('testing');
      //setAlert(show:true, msg:'Value cannot be empty u idiot', type:'');
      <TimeOut/>
     else if (name && isEditing) 
      
     else 
      const newItem =  id: new Date().getTime().toString(), title: name ;

      setList([...list, newItem]);
      setName('');
    
    
  ;

const forOnChange = (e) =>
  setName(e.target.value);


const showAlert = (show= false, type= '', msg= '')=>
  setAlert(show:show, msg:msg, type:type)



const removeAllItems = ()=>
  setAlert(show: true, msg: 'List is empty now', type:'');
  setList([]);



const removeSpecificItem = (id)=>
  const newList = list.filter((item) => item.id !== id);
  setList(newList);

  return (

    <section className="section-center">
      <form action="" onSubmit=handleSubmit>
        alert.show ? <Alert alert=alert removeAlert=showAlert/> : null
        <h4>Grocery basket</h4>
        <input type="text" placeholder="chickets etc" onChange=(e) => setName(e.target.value)/>
        <button value=name >isEditing ? 'Edit' : 'Submit'</button>

        <button className="clear-btn" onClick=removeAllItems>Clear all items</button>
      </form>
      list.length > 0 ? <div className="grocery-container">
          <List items=list removeSpecificItem=removeSpecificItem/>
      </div> : null
      
    </section>

  );


export default App

错误

 Line 31:7:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 31:8:  'Timeout' is not defined                                               react/jsx-no-undef

错误在

【问题讨论】：

您能否在此处提供该错误以及代码？

您可以删除<Timeout /> 部分并在那里使用您的超时功能。我相信你要找的是setTimeout() 而不是setInterval()

Shivam，我在 处添加了错误

你好@shashi srinath，谢谢你，但是有没有办法使用钩子useEffect（），我知道如果我将useEffect部分放在if语句中它会给我一个错误，因为 handleSubmit 不是一个组件，但有没有办法解决这个问题？

【参考方案1】：

试试这个

const handleSubmit = (e) => 
    e.preventDefault();
    if (!name) 
      // console.log('testing');
      // <TimeOut/> remove this, you cant use react components here
      setAlert(show:true, msg:'Value cannot be empty u idiot', type:'');

      setTimeout(function () 
          setAlert(show:false, msg:'Value cannot be empty u idiot', type:'');
      , 2000)

     else if (name && isEditing) 
      
     else 
      const newItem =  id: new Date().getTime().toString(), title: name ;

      setList([...list, newItem]);
      setName('');
    
    
  ;

【讨论】：

你好，Shashi，谢谢你，但是有没有办法使用钩子 useEffect()，我知道如果我将 useEffect 部分放在 if 语句中，它会给我一个错误，因为handleSubmit 不是一个组件，但有办法解决这个问题吗？