时间戳

首页 > 解决方案 > react组件提示框或者useState或者useEffect

reactjs - react组件提示框或者useState或者useEffect

问题描述

在反应组件中，我正在使用提示框从用户那里获取城市。一切正常，但提示框显示了两次。如果可以做到这一点，请帮助或帮助我使用 usestate 或 useeffect 钩子。或者我应该使用类组件。我正在寻找东方的方法.....我是新手。

非常感谢

import React from 'react'
    
const SearchArea = ({Country}) => {
  var city = prompt("Please enter your city")
  return (
    <div>
      {countires.map(c => {
        if (c.area == city) {
          return (
            <div>{c.area}</div>
          )
        }
      })}  
    <div>
  )
}
    
export default SearchArea

标签： reactjsreact-hooks

解决方案

使用 'useState' 和 'useEffect'，您可以实现相同的效果，如下所示：

import React from 'react'

const SearchArea = ({Country}) => {
    const [city, setCity] = React.useState(null);

    React.useEffect(() => {
       const city = prompt("Please enter your city");
       setCity(city);

    }, [])
    
    return (
      <div>
      {
         countires.map(c => {
           if (c.area == city) {
            return (
              <div>
                {c.area}

              </div>
            )
           }
        })
     }  
    <div>
  
  )
}

export default SearchArea

推荐阅读