Javascript浏览器提示在React中询问两倍相同的值

Question

我只是在学习javascript和react。我已经创建了一个要运行的示例代码。

function App() {
return (
<div>
{fun()}
</div>
);
}
function fun() {
var me = window.prompt("me","")
var she = window.prompt("she","")
return(
<div>
{me} and {she}
</div>
)
}

但问题是，浏览器提示询问每个人，她值了两次，并在函数中使用了第二个值。请帮我解决这个问题。

我也尝试过从其他函数中获取值，但我认为页面在给出前两个输入后会重新加载。

Answer 1

最佳做法是将副作用(如窗口提示(转移到useEffect调用中。这样，再加上几个状态变量(useState(，就可以确保只提示用户一组时间，并且只要安装了组件，它就会留在内存中。

我想解决的另一件事是，应该将fun函数作为一个组件，而不是一个松散的函数。没有太大区别，只是一个大写字母，但它允许您将其用作组件而不是函数。

const { useState, useEffect } = React;
function App() {
return <div><Fun/></div>;
}
function Fun() {
const [me, setMe] = useState("");
const [she, setShe] = useState("");
useEffect(() => {
setMe(window.prompt("me", ""));
setShe(window.prompt("she", ""));
}, []);
return (
<div>
{me} and {she}
</div>
);
}
ReactDOM.render(<App />, app);

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id=app>

Answer 2

如果您使用create-react应用程序来创建项目，那么您的index.js文件很可能看起来像这个

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);

React StrictMode渲染组件两次(在开发中，而不是在生产中(，以便检测代码中的任何问题并警告您。

只需删除React.SrictMode，您就会看到提示按您的意愿出现两次。让你的代码像这样：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<>
<App />
</>,
document.getElementById('root')
);

Answer 3

它没有

function App() {
return (
<div>
{fun()}
</div>
);
}
function fun() {
var me = window.prompt("me","")
var she = window.prompt("she","")
return(
<div>
{me} and {she}
</div>
)
}
ReactDOM.render(<App/>,app)

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id=app>

Answer 4

从Index.js中删除React.StrictMode，这应该可以解决问题。谢谢AJITHKUMAR S！