我无法使react应用程序显示我希望它显示的正确模态

Question

我正在做与教程相同的步骤，但我没有得到相同的结果，我不知道为什么，当我没有在输入中输入任何值时，它应该在模态中显示一条消息，但它显示了一个错误，我放在那里是为了防止我忘记并为useReducer()输入了一种在我的应用程序中不存在的操作，如果有人能回答，我将非常感谢，如果你还在读这篇，谢谢你

import Modal from './Modal';
import { data } from '../../../data';
import { findAllByTitle } from '@testing-library/react';
// reducer function
const reducer=(state,action)=>{
if(action.type==='ADD_ITEM'){
const newPeople=[...state.people,action.payload]
return {...state,
people:newPeople,
isModalOpen:true,
modalContent:'item added'};
}
if(action.type==='NO_VALUE'){
return {...state,
isModalOpen:true,
modalContent:'please enter a value'};
}
if(action.type==='CLOSE_MODAL'){
return {...state,
isModalOpen:false};
}
if(action.type==='REMOVE_ITEM'){
const newPeople=state.people.filter((person)=>person.id!==action.payload)
return {...state,
people:newPeople};
}
throw new Error('no matching action type')
}
const defaultState={
people:[],
isModalOpen:false,
modalContent:''
}
const Index = () => {
const [name,setName]=useState('')
const [state,dispatch]=useReducer(reducer,defaultState)
const handleSubmit=(e)=>{
e.preventDefault()
if(name){
const newItem={
id:new Date().getTime().toString()
,name
}
dispatch({type:'ADD_ITEM',payload:newItem})
setName('')
} 
else{
dispatch('NO_VALUE');
}
}
const closeModal=()=>{
dispatch({type:'CLOSE_MODAL'});
}
return (<>
{state.isModalOpen && <Modal closeModal={closeModal} modalContent={state.modalContent}/>}
<form onSubmit={handleSubmit} className='form'>
<div>
<input type="text" 
value={name} 
onChange={(e)=>setName(e.target.value)} />
</div>
<button type="submit">add</button>
</form>
{state.people.map((person)=>{
return (<div key={person.id} className='item'>
<h4>{person.name}</h4>
<button 
onClick={()=>dispatch({type:'REMOVE_ITEM',payload:person.id})}>
remove</button>
</div>)
})}


</>)
}

export default Index;

`in another file`
import React, { useEffect } from 'react';
const Modal = ({modalContent,closeModal}) => {
useEffect(()=>{
setTimeout(()=>closeModal(),3000)
})
return <div className='modal'>
<p>{modalContent}</p>
</div>;
};
export default Modal;

Answer 1

import React, { useReducer } from 'React';

您需要导入它，并将其放在modal导入之前