reactjs 在控制台中获取未定义- React.js

w8f9ii69 于 2022-11-22 发布在 React

关注(0)|答案(1)|浏览(128)

因此，请求返回JSON文件。但在控制台中，它说“未定义”，我不知道为什么。
因此，当点击按钮时，将发送来自google Place API的请求的结果;其中包含调用Info组件的PlaceDetailsAPI所需的place_id。
第一个
所以，这是我认为它的工作方式（抱歉，我是新的React）
下面是InfoPopup组件

function InfoPopup({ open, onClose, restaurant }) { 
    const [restaurant1, setRestaurant1] = useState([])

    let id = restaurant.place_id
    let URL = `/maps/api/place/details/json?place_id=${id}&key=${process.env.REACT_APP_API_KEY}`
    const fetchRestaurants1 = async () => {
        const res1 = await axios.get(URL)
        setRestaurant1(res1.data.results);
      }

    useEffect(() => {
          fetchRestaurants1()
          console.log(restaurant1) //This is getting 'Undefined' 
      }, [id]);
        

    const navigate = useNavigate()
    if (!open) {return null}
   

    return ReactDOM.createPortal(
    <>
        <div>
            {restaurant1?.map(restaurant => (
                <div key={restaurant.place_id}> {restaurant.formatted_phone_number} </div>
            ))}
        </div>
        <div className="popup">
            <div className="popup-inner">
                <button className="close-btn" onClick={onClose}> Close </button>
                <h1 className="title"> {restaurant.name} </h1>
            <ul>
                {/* <li className="service">
                    Status: {}
                </li> */}
                <li className="location">
                    Address: {restaurant.vicinity}
                    Phone Number: 
                </li>
                <li className="cost">
                    Cost: {restaurant.price_level}
                </li>
                {/* <li className="food">
                    Food Type:
                </li> */}
            </ul>
            <div className="links">
                <Link className="writeButton" to="/write" state={{data: restaurant}}>
                    Write a review
                </Link>
                {/* <button className="writeButton" onClick={() => navigate("/write", {data:restaurant})}>
                    Write a review
                </button> */}
                <Link className="readButton" to="/read" state={{data: restaurant}}>
                    Read the reviews
                </Link>
                {/* <button className="readButton" onClick={() => navigate("/read")}>
                    Read the reviews
                </button> */}
            </div>
            </div>
        </div>
    </>,
    document.getElementById('portal')
  )
}

我想问题是在第一次渲染时，没有传递ID。但我不知道如何解决它。任何帮助都将不胜感激。

reactjs

来源：https://stackoverflow.com/questions/74494957/getting-undefined-in-console-react-js

1条答案

按热度按时间

7nbnzgx91#

查看以下代码块：

const fetchRestaurants1 = async () => {
    const res1 = await axios.get(URL)
    setRestaurant1(res1.data.results);
  }

useEffect(() => {
      fetchRestaurants1()
      console.log(restaurant1) //This is getting 'Undefined' 
  }, [id]);

您正在等待GET调用的结果，这很好，因为它允许您在等待响应后在下一行中设置状态。
问题在于：当您在useEffect（）中调用**fetchInvents 1（）**时，您并没有等待该函数执行，因此，我们直接跳到下一行和console.log（）restaurant 1，当然该行仍然是空的。
设置状态调用也会出现同样的问题。

const [value, setValue] = useState(null);

然后过了一段时间：

setValue(5);
console.log(value);

发布到console的值将为null，因为JS不想在移动到下一行console.log（value）之前等待set state调用完成;
要解决此问题，请执行以下操作：使useEffect回调异步，并等待在其中进行axios.get调用的函数。示例：

const fetchSomeData = async () => {
    const response = await axios.get(URL);
    setData(response.data);
  }

  useEffect(async () => {
      await fetchSomeData();
      /* do some stuff */
  }, []);

当然，你还是不能在console.log上面设置状态后调用。
如果您想要一种通用的方法来记录状态更改而不用担心异步行为，您可以添加一个简单的useEffect：

useEffect(() => {
    console.log(value);
  }, [value]);

其中value是任何状态变量。由于value在依赖项数组中，因此每当它发生更改时，useEffect都会触发并记录更改。

赞(0）回复(0）举报 2022-11-22

我来回答

reactjs 在控制台中获取未定义- React.js

1条答案

相关问题

热门标签

最新问答