小编nov*_*imo的帖子
在没有 Google API 的情况下使用浏览器 GeoLocation？
我需要从 Web 客户端获取用户的位置。由于在一些国家（详细信息，请参阅谷歌限制＃2这个问题），下面的代码会返回一个空的对象（在浏览器控制台，铬，Safari浏览器，等等。）：
navigator.geolocation
所以，我不能getCurrentLocation在地理定位 API 中使用和其他方法
我使用不同的方法来查找用户位置（IP 基础），但它不能正常工作。
还有另一种方法可以找到用户位置坐标吗？
更新（2020 年 7 月 12 日）：
由于误解，我更新了我的帖子。 有些人说它适用于 HTTPS。于是我打开Chrome浏览器，搜索StackOverflow（这个站点是众所周知的HTTPS）
现在在控制台上，没有 navigator.geolocation 的任何数据：
推荐指数
解决办法
查看次数
属性“click”在类型“never”上不存在。TS2339
根据有关 TypeScript 此类错误的其他类似问题（关于问题#44147937和#40796374），我发现分配null创建状态或引用会导致此问题：
Property ... does not exist on type 'never'
如何在这个示例组件中处理这个问题？
const FooComponent: FunctionComponent<FooInterface> = () => {
const myRef = useRef(null)
const handleClickOnButton = () => myRef?.current?.click();
return (
<div>
<div ref={myRef} />
<button onClick={handleClickOnButton} />
</div>
}
推荐指数
解决办法
查看次数
我如何使用 React 测试库编写测试来检查悬停是否更改了组件样式？
我正在测试我的应用程序并遇到问题。当尝试测试Dropdown组件中的行是否对悬停施加效果时，我注意到我无法检查元素的背景颜色，我觉得这很奇怪。
尝试使用 jest-dom matcher "toHaveStyle()"，下面是一个示例，我一生都无法让它工作。
下拉菜单.test.tsx
test('Should contain clickable elements that change style when hovered', () => {
const dropElement1 = screen.getByLabelText('testLabel1');
expect(dropElement1).toHaveStyle('background: white');
});
错误
我还尝试过使用background-color、使用十六进制值（另一个有趣的错误是 PrettyDom 将十六进制转换为 RGB），或者添加到toHaveStyle().
我确信该元素确实是白色的，但我不明白出了什么问题。如果我的方法是不好的做法，并且您对如何检查这一点有更好的了解，或者您对我的问题有解决方案，请告诉我！
推荐指数
解决办法
查看次数
React Router v4重定向传递状态未定义
我有一个专用的Route / something，我希望只有登录后才能访问。我正在使用带有状态的重定向，但是在目标位置。状态未定义。
这是重定向：
<Redirect
to={{
pathname: "/login",
state: { referrer: props.location }
}}
/>
在目标位置，我试图访问它，但是对于该州却未定义。
this.props.location.state is undefined and I can't get referrer
我正在关注这个例子。可能是错误吗？
推荐指数
解决办法
查看次数
从具有超过 10,000 个键/值对的对象中查找值的有效方法
我有一个包含超过 10,000 个键值对的大对象。
我想找到特定对的值，所以我这样做：
const value = object[key]
这有效率吗？有一个更好的方法吗？对象的条目数< 10,000 可以吗？
推荐指数
解决办法
查看次数
TypeError：无法读取未定义的属性（读取“地图”）React JS
我面临着错误TypeError: Cannot read properties of undefined (reading 'map')
此代码应该返回卡片标题中的城市名称，该卡片标题是在我的其他文件中定义的，但会引发错误。
代码：
import React, {Component} from 'react';
import Body from './Body';
class Weather extends Component {
constructor(props) {
super(props);
this.state = {
weather: [],
};
}
async componentDidMount() {
const url = `http://api.weatherapi.com/v1/current.json?key=${this.props.api}&q=Jaipur&aqi=no`;
let data = await fetch(url);
let parsedData = await data.json();
this.setState({
weather: parsedData.weather,
});
}
render() {
return (
<div className="container">
<div className="row">
{this.state.weather.map((element) => {
return (
<div className="col-md-4">
<Body city={element.location.name} />
</div>
);
})}
</div>
</div> …推荐指数
解决办法
查看次数
为什么尝试安装时没有安装最新版本的 expo？
I wanted to do the run:android command but found out that the expo-cli version I have is NOT compatible to install the expo SDK version that's required to run the run:android command; the SDK version required is 41 and above.
41及以上的SDK需要expo-cli的是4.4.1，我一直在尝试安装，但效果不佳。输入命令后，安装过程开始，一切似乎都像其他软件包一样安装。但是当检查 的版本时cli，它给出的版本与之前的版本相同。
为什么会出现这种情况？
最后一次尝试是卸载并重新安装。以下是命令及其结果：
$ npm -g uninstall expo-cli$ npm install -g --force expo-cli
npm WARN using --force I sure hope you know what you are doing.
npm WARN deprecated graphql-tools@3.0.0: This package has been …推荐指数
解决办法
查看次数
如何在反应中获取位置信息？
我想通过使用Geolocation APIReact 获得位置信息。
我button在此代码中获取了位置信息。
import React, { Component } from 'react'
class App extends Component {
constructor(props) {
super(props)
this.state = {
latitude: null,
longitude: null,
}
}
position = async () => {
await navigator.geolocation.getCurrentPosition(
position => this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude
}),
err => console.log(err)
);
console.log(this.state.latitude)
}
render() {
return (
<div>
<button onClick={this.position} className='Filter'>Filter</button>
</div>
);
}
}
export default App;
一旦按a button，控制台就会显示出来null。但是，当我button再次按a 时，控制台将显示位置信息。
您是否知道为什么我第一次无法获得位置信息？
推荐指数
解决办法
查看次数
在React项目中添加Redux
在React项目中添加redux（使用Redux重构一个简单项目）
考虑一个简单的项目，一个使用两个按钮的计数器应用程序，一个用于递增，另一个用于递减计数器值。
在实际情况下，我们使用状态来保存计数器值，如下所示：
在App.js中：
import React, {Component} from 'react';
import CounterApp from './CounterApp'
class App extends Component {
render() {
return (
<CounterApp/>
);
}
}
export default App;
在CounterApp.js中：
import React, {Component} from 'react';
class CounterApp extends Component {
state = {
counter: 0
};
handleIncrement = () => {
this.setState(prevState => ({
counter: prevState.counter + 1
}))
};
handleDecrement = () => {
this.setState(prevState => ({
counter: prevState.counter - 1
}))
}; …推荐指数
解决办法
查看次数
Lodash 时间方法索引
我需要将组件复制“n”次。为此，我使用了lodash方法times。问题是我需要一个索引作为生成的组件的键，但它看起来没有。
我有以下代码：
export const MyComponent: React.FC<{times: number}> = ({ times }) => {
return (
<>
{_.times(times, () => (
//I need a key={index} in this div
<div className="bg-white border-4 border-white md:rounded-md md:p-2 content-center my-4 shadow w-full">
</div>
))}
</>
);
};
这将返回n 次之内的组件。
我尝试执行一种返回组件并使用 设置索引的方法useState，但它陷入了无限循环。我想把一个大的随机数作为密钥，所以很难得到相同的，但我不喜欢这个解决方案。我想使用这种方法，因为它很干净。
那么你认为我可以做些什么来为该组件提供 a 呢？
推荐指数
解决办法
查看次数
HTML表单不使用POST发送数据？
下面是 PHP 代码，我删除了一些 PHP 邮件程序代码，因为堆栈溢出拒绝允许我提交代码，说代码太长，并且我需要对当前问题进行更多解释。
<?php
if(isset($_POST['submit'])) {
$mail->addAddress($_POST['email']);
// $mail->addReplyTo($_POST['email'], $_POST['name']);
$mail->isHTML(true);
$mail->Subject = $_POST['subject'];
$mail->Body = $_POST['message'];
$mail->addAttachment($_POST['attachment']);
try {
$mail->send();
echo 'Your message was sent successfully!';
} catch (Exception $e) {
echo "Your message could not be sent! PHPMailer Error: {$mail->ErrorInfo}";
}
}
else {
echo "There is a problem with the contact.html document!";
}
?>
下面是 HTML 表单。我尝试提交表单数据以供PHP代码处理，但拒绝提交。我在上面发布了 PHP 代码，在下面发布了 HTML 代码。
<form method="POST" role="form" enctype="multipart/form-data">
<div class="row">
<div class=" col-md-6 mb-3">
<input type="email" class="form-control" name="email" …推荐指数
解决办法
查看次数
标签 统计
javascript ×7
reactjs ×6
react-native ×2
browser ×1
expo ×1
forms ×1
geolocation ×1
google-api ×1
html ×1
jest-dom ×1
jestjs ×1
location ×1
lodash ×1
node.js ×1
object ×1
php ×1
react-hooks ×1
react-redux ×1
react-router ×1
redux ×1
typescript ×1
unit-testing ×1