为什么toFixed()在我的React函数组件中不起作用？
在React函数组件中，toFixed()方法可能不起作用的原因有以下几点：
- 数据类型不正确：toFixed()方法只能用于数字类型，如果你的数据类型不是数字，那么该方法将不起作用。在React中，你需要确保你的数据是数字类型，可以使用parseInt()或parseFloat()方法将字符串转换为数字。
- 作用域问题：在React函数组件中，你需要确保toFixed()方法被正确调用并且在正确的作用域中。确保你在正确的位置调用该方法，并且确保你正在操作正确的变量。
- 不可变性：React鼓励使用不可变数据的概念，即不直接修改数据，而是创建一个新的副本。如果你直接在原始数据上调用toFixed()方法，它将不会生效。你应该使用setState()方法或其他状态管理工具来更新数据，并在更新后再次调用toFixed()方法。
- 渲染时机：React组件的渲染是异步的，当你调用toFixed()方法时，可能还没有完成渲染过程。你可以使用useEffect()钩子函数来确保在组件渲染完成后再调用toFixed()方法。
综上所述，如果你在React函数组件中使用toFixed()方法不起作用，你应该检查数据类型、作用域、不可变性和渲染时机等方面的问题。如果问题仍然存在，你可以提供更多的代码和上下文信息，以便更好地帮助你解决问题。
相关·内容
useEffect(() => {
calculateTip();
}, [bill, tipPercentage, numberOfPeople]);
const calculateTip = () => {
const tip = ((tipPercentage / 100) * bill).toFixed(2);
const tipPerGroup = ((tipPercentage / 100) * bill * numberOfPeople).toFixed(
2
);
setTipPerGroup(tipPe
浏览 2提问于2022-05-27得票数 1
回答已采纳
我正在使用react来控制值。在HTML类型中，是否可以将值四舍五入到小数点后两位？input？我有步骤0.166666666，但在HTML视图中我想显示：0.17代替0.166666666666，0.33代替0.333333333333，依此类推。
我不想更改输入视图的value，我只想更改输入视图而不是value。toFixed对我不起作用。
浏览 1提问于2018-04-03得票数 1
对本地人的反应是全新的。问题不在于代码的实际逻辑。测试了它，并在浏览器中工作。它是否可以将代码逻辑放置在呈现()中？App完全不使用它在render()之外进行渲染。还是因为this.setState在哪里？
更多细节。更多的细节。更多细节。更多的细节。更多细节。更多的细节。更多细节。更多的细节。更多细节。更多的细节。更多细节。更多的细节。更多细节。更多的细节。更多细节。更多的细节。更多细节。更多的细节。
import React from 'react';
import type {Node} from 'react';
import {
SafeArea
浏览 2提问于2022-01-26得票数 0
回答已采纳
我正在试着做一个计时器，从1.0开始，增加0.1，直到达到一个随机数。您必须在组件呈现后5秒启动一个“会话”，这一切都正常。问题是，我希望一个会话在另一个会话结束5秒后开始，而React忽略了允许下一次会话的setState，我不明白为什么。 注意:只有当我创建一个使用setIsGameActive(isGameActive => isGameActive = !isGameActive)调用切换函数的按钮并单击它时，它才起作用 const GamePanel = () => {
const [gameTime, setGameTime] = useState(1);
浏览 14提问于2020-09-08得票数 0
回答已采纳
我正在实现输入验证，以禁止超过两个小数，但当我尝试更新一个值时，React认为它是相同的，所以它不会更新状态。
例如，值是1.00000，这不适用于我的验证，因为JavaScript认为1.0000等于1、1.0或1.00，所以当我调用将状态从1.0000更新到1.00时，不会发生任何事情。我不会责怪React本身，因为它可能正在执行JavaScript相等检查，并且看到它是同一件事，因此不会更新DOM。
有没有什么办法可以通过使用功能组件设置值的状态来强制将值从1.000更新到1.00？谢谢
验证不起作用，用户可以添加所有这些尾随的0
验证工作正常，我不能输入其他数字(除非它是0)
浏览 0提问于2021-07-27得票数 0
当在地图上移动鼠标并将其显示为mapContainer下的文本时，是否有任何有效的解决方案可以在react-leaflet中获取纬度和经度？对于react-leaflet事件是否有明确的文档？
浏览 77提问于2021-03-09得票数 1
回答已采纳
3回答
编辑以包括父类..。
我在使用useState钩子从功能组件更改状态时遇到了问题。我在这里做错什么了？我已经用星号显示了我的api密钥。locationOne和locationTwo工作得很好。本质上，这是我正在制作的应用程序的一部分，它使用mapbox计算两个坐标之间的距离。
import React, { useState, useEffect } from "react";
import { COORDS } from "./coords";
const CustomTrip = ({
locationOne,
locationTwo,
on
浏览 6提问于2020-04-19得票数 0
回答已采纳
2回答
我尝试访问我的组件中的一些引用。但是我在控制台中有这个错误。withRouter.js:44 Warning: Stateless function components cannot be given refs (See ref "pseudo" in FormInputText created by RegisterForm). Attempts to access this ref will fail.
下面是我的组件：
class RegisterForm extends React.Component {
render() {
return (
浏览 0提问于2016-07-28得票数 8
回答已采纳
我经常按照“类体系结构”编写函数组件，其中我所有与组件有关的函数都像类中的方法一样在其内部编写。
例如，这里有一个函数counterAsFloat，它与Counter组件相关。正如您所看到的，我刚刚在组件中编写了它：
export default function Counter() {
const [counter, setCounter] = React.useState(0);
const counterAsFloat = () => {
return counter.toFixed(2);
};
return (
<div classNa
浏览 2提问于2020-07-11得票数 44
回答已采纳
为什么按钮onClick函数会起作用？
为什么{this.test.bind(this)}不起作用？
如果你点击按钮按钮，事件可以正常并跳回
{this.test.bind(this)}不起作用。
如果使用{this.test()}，它可以工作，但会出现一些错误
Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a p
浏览 19提问于2017-02-26得票数 0
回答已采纳
2回答
我正在尝试以prop的形式将API数据传递给App.js。我可以通过控制台记录API数据，这样我就可以知道它是如何通过的。当我将它赋值给一个prop时，我得到了ResultList.js:28未捕获(在promise中) TypeError: this.props.openState不是一个函数。这是正确的语法吗？抱歉，如果这是一个幼稚的问题，我对这一切都是非常陌生的。 我尝试过几种不同的赋值方式，但我对道具的不熟悉阻碍了我。我知道API正在返回数据，因为我可以通过控制台将其注销。 ````import { Helmet } from "react-helmet"; ````
浏览 35提问于2019-05-10得票数 0
我学习ReactJS并尝试通过“清除ReactJS”来使用它。
这是我的简单代码：
class MyList extends React.Component{
constructor(data){
super(data)
this.text = data.text
}
render(){
return React.createElement("h1", null,
this.props.text)
浏览 0提问于2018-09-17得票数 0
回答已采纳
4回答
如何在地图中进行求和？
、、、、
最初，我想问如何在映射中调用函数，但我意识到我并没有以调用函数的方式做任何错误的事情，所以我只是认为我的代码是错误的。
因此，我试图对我绘制的地图的所有价格做一个求和，有时这些价格会因为这个人想要的数量而改变，所以我打电话给：
//My function call inside the map
{calculateTotal(fixedPrice)}
//The function
const calculateTotal = (price) => {
setTotalPrice (totalPrice + price)
}
但我得到了这个错误作为回报
浏览 3提问于2021-09-19得票数 2
回答已采纳
我尝试使用{val}.toFixed(2)，但因为我必须返回该值，所以它所做的就是返回值和字符串".toFixed(2)“。我也尝试了{val.toFixed(2)}，但它抛出了一个错误，因为"val.toFixed(2)“不是一个函数。它位于统计组件中 (我目前在赫尔辛基大学学习FullStack公开赛) 我该怎么做呢？ import React, { useState } from 'react'
import ReactDOM from 'react-dom'
const Button = ({ onClick, text }) =&
浏览 87提问于2020-06-25得票数 1
回答已采纳
我设置了一个新的react项目，由于某种原因，没有调用componentDidMount方法。
我已经通过在console.log中调用componentDidMount来验证这种行为，但是在控制台中看不到它的输出。
此外，this.setState()不起作用。
我很难理解为什么componentDidMount没有被调用。我试着使用了React "v0.14.0“和"v0.14.3”。
为什么“componentDidMount”没有被调用？
代码：
var React = require('react');
var RecipePage = React.
浏览 1提问于2015-11-30得票数 68
回答已采纳
3回答
我在做反应。我刚刚创建了一个名为Input.jsx的组件
import React from "react";
const Input = (label, placeholder) => {
return (
<label htmlFor={label}>
{label}
<input type="text" placeholder={placeholder} />
</label>
);
};
export default Input;
我导入它并在index.js中
浏览 2提问于2020-10-03得票数 1
回答已采纳
1回答
为什么我们不能在react类组件中使用钩子？React官方只说钩子在类内不起作用，但没有说明为什么它不能工作。
浏览 4提问于2022-01-26得票数 0
回答已采纳
1回答
在下面的代码中，我只想为chartDesc设置一些单词的样式(例如，“回报周期”)。无论是粗体还是斜体等，都尝试过正则表达式，但没有起作用。请帮帮我！
import React from 'react';
import Pie from './Pie';
import TextTruncate from 'react-text-truncate';
import ReactTooltip from 'react-tooltip';
import { browserHistory } from 'react-router&#
浏览 3提问于2017-01-10得票数 1
我试图找出为什么每当我聚焦和模糊输入字段时，React/Redux/Redux-Form会自动将我的payload转换为字符串。
一定有什么进程在干扰我，但我不知道如何排除故障。
我试过使用ReduxDevTools Chrome扩展，它基本上输出：
type(pin): "@@redux-form/INITIALIZE"
▶meta(pin)
▶payload(pin)
Amount(pin): 2222
type(pin): "@@redux-form/FOCUS"
▶meta(pin)
type(pin): "@@redux-form/B
浏览 2提问于2017-05-30得票数 0
我在等待数据(当用户提交时)，我获取数据，然后用useState()返回温度，但是我想返回一个像Temperature:12°C一样的标题。
还有一件事，我想把温度乘以小数点2位，但我不知道怎么做。
这是我的代码：
import axios from 'axios';
import React from 'react'
import {useState, useEffect} from 'react'
import './style.css'
import rain from './use1.png'
fu
浏览 6提问于2021-12-26得票数 0
回答已采纳
我想用react-indiana-drag-scroll将我的组件初始化为一个初始滚动，但它不起作用，我不知道为什么。
你可以在上找到代码。
我想初始化红线(当前时间)上的滚动，但scrollTo函数在此代码中不起作用。
浏览 10提问于2020-03-04得票数 1
回答已采纳
你好，我是一个新的程序员，最近我开始在react中编码，但我的JavaScript代码有这个问题。导入不起作用。 import React from 'react';
import './App.css';
import { hello } from '/components/hello.js';
function App() {
return (
<div className="App">
<header>
<p>
<hello&g
浏览 19提问于2020-10-19得票数 0
2回答
我正在慢慢地学习RXJS，并学习如何在React的上下文中使用它。 我发现的所有Rxjs教程都是从可观察性开始的。这是有道理的。当我尝试在react中使用可观察对象时，它不起作用。相反，我必须创建一个主题，并将价值推向主题。 为什么会这样呢？为什么我不能在React中使用普通的老式观察值？我做错了什么吗？有人能解释一下为什么react中的RXJS必须使用主题吗？ 我意识到这有点模糊，但我还不能理解概念来表达更好的问题。这里有一个例子来说明我正在努力理解的东西。 下面是一个非常简单的组件，它接受输入值中的一个值并显示它。常规的react，没有RXJS。 const InputBox = ()
浏览 17提问于2019-10-14得票数 0
回答已采纳
1回答
我试图用React将摄氏温度编码为华氏(反之亦然)转换器。
但是双向数据绑定不起作用，我也不明白为什么。
有人能帮忙吗？
谢谢!
这是我的密码
function GradConverter(){
const [Cgrad, toC] = React.useState(null)
const [Fgrad, toF] = React.useState(null)
return(
<div id="container">
<div id="box1">
<h1>Celsius<
浏览 0提问于2019-06-28得票数 1
回答已采纳
3回答
我想问你关于在React.js中重定向的问题。
下面是中Home.js的修改
(这不是我的私人GitHub回购！它是开源库)
import React, { useState } from 'react'
import { Redirect } from 'react-router-dom'
const Home = () => {
console.log('Home');
const renderRedirect = () => {
return <Redirect to={{
pathnam
浏览 21提问于2019-11-18得票数 2
回答已采纳
我一直试图通过搜索onClick而不是触发问题来解决这个问题，但遗憾的是，似乎没有人有一个合适的解决方案。
对于这个项目，我最近学习了ReactJs来将其集成到AngularJS中，以取代Angular中缓慢的ng-repeat。
我现在遇到的问题是，当单击呈现的<tr>时，onClick不会调用updateOrders函数。通过我的测试，我已经确认问题不在于点击处理程序。
通过我的研究，我发现人们在使用.map函数生成数组时也存在同样的问题。虽然我已经手动完成了此操作，但问题仍然存在。
我希望社区能够帮助我指出我做错了什么。
非常感谢!
/*Click handler*/
浏览 4提问于2015-12-03得票数 1
2回答
不知道为什么，但是当从另一个函数访问方法时，模式没有关闭。我可以在组件中对该方法进行控制台日志记录，但该方法就是不起作用。 这是closeModal()函数所在的主ReviewsScreen.js import React, {Component} from 'react';
import {Modal} from 'react-native';
import {TouchableOpacity} from 'react-native';
import {View, Text, StyleSheet} from 'react-nativ
浏览 14提问于2021-04-09得票数 0
我有点困惑，为什么我们在react中创建类的时候需要导入组件？为什么我们不能像在函数组件中那样简单地导入react呢？
浏览 2提问于2020-06-14得票数 0
3回答
在我工作的天气应用程序中，我有三个组件，一个App.js组件，它包含另外两个组件(search.js和Main.js)。用户搜索城市，main.js组件显示相关的天气数据。
现在我想动态地更改整个屏幕的背景，但是为此，我需要访问我的App.js组件中的API-data函数，它将提供图标id，然后我就可以更改背景了，但是我现在很困惑如何做呢？我已经附上了下面的代码。
组件App.js
import React, { useState } from "react";
import "./App.css";
import Maindata from "./Co
浏览 16提问于2022-11-28得票数 1
我是React Hooks的初学者，我在React中有一个功能组件： import React, {useState} from 'react'
const myFunction() {
const [myValue, setValue] = useState(10000)
function currencyFormat(num) {
return parseFloat(num).toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}
handleChange = (e) =>
浏览 3提问于2020-04-24得票数 0
我在网上找到了这个代码片段，我一直试图在react.js中重新创建它，我知道它与componentDidMount()有关，但我不知道如何实现它。
<script>
import { onMount } from "svelte";
import { getETHPrice } from "../utils/getETHPrice";
let value;
onMount(async () => {
value = await getETHPrice();
});
</script&
浏览 0提问于2022-03-12得票数 0
回答已采纳
我正在学习一个React教程，我不明白为什么我会有一个bug。
我正在尝试使用React添加这个按钮元素：
<button onClick={this.add.bind(null, 'new item')}>New Item</button>
事件处理程序应调用位于不同React类中的以下函数：
add: function(item) {
var arr = this.state.comments;
arr.push(item);
this.setState({comments: arr});
},
我被告知这是不
浏览 7提问于2017-02-07得票数 0
我不熟悉React，我非常困惑，日夜不停地思考这个问题，几乎我所有的头发都掉下来了，这就是为什么在使用类创建组件时，总是扩展React.Component类的原因。
但是在React.Component函数组件和其他方法中，我们没有做任何这样的事情来将创建的组件推入到类中。因此，主要的问题是，什么是React.Component类?为什么我们总是将新组件作为使用扩展的子组件添加到它，以及为什么我们不能在没有在类组件中使用扩展或不扩展React.Component类的情况下在react中创建本机组件。那么，React.Component类是什么呢？内部发生了什么？
我会非常感谢这个人，他会用例子
浏览 0提问于2018-10-01得票数 5
回答已采纳
我的代码已经成功编译，没有任何错误，但是在我的浏览器上，我得到的是这个，而不是输出的Target container is not a DOM element。为什么会这样呢？我遗漏了什么？
我尝试过React.createElement，但它不起作用。
import React from 'react';
import ReactDOM from 'react-dom'
class Greeting extends React.Component {
constructor (props){
super(props);
this.setSt
浏览 1提问于2019-08-01得票数 0
1回答
我有一个组件，它呈现“react图标”对象。但是，如果没有提供图标，我希望在UI上显示"NoIcon“字符串。
组件A就是这样的。
元件A
import React from 'react';
import { FaHeart} from "react-icons/fa";
const Icon = ({FaIcon = "NoIcon"}) => {
return (
<div>
<FaIcon/>
</div>
);
};
export default
浏览 3提问于2021-09-30得票数 0
回答已采纳
3回答
因此，我想将某些样式添加到附加到组件的任何子元素中。假设父组件名为Section，子组件在本例中称为Card。在Section.js中，我尝试这样做：
renderChildren = () =>{
return React.Children.map(this.props.children, (child, i)=>{
let el = React.cloneElement(child,{
style: {opacity:0.5}
})
return el
})
}
render(){
<ScrollView>
浏览 1提问于2018-03-27得票数 21
回答已采纳
1回答
我在学习反应本土化。制作了12个应用程序。现在在我的第三个应用程序中，我需要做一些算术运算。这很简单。就像100 * 4.31 and 100 * 4.41
console.log(100 * 4.31)
console.log(100 * 4.41)
输出
430.99999999999994
441
在第一个日志中，输出应该是4.31，但它不是。
有人能为我找到一个解决方案吗?这个简单的算术运算在React本机中有什么问题？
浏览 2提问于2020-07-25得票数 2
回答已采纳
我是新来的。当我开始对大多数的文档做出反应时，react和react视频资源说，使用功能组件而不是基于类的组件。他们还说，如果您想要管理状态并使用生命周期，请使用钩子。
我想知道功能性成分在反应中的优势是什么？
以及为什么react在创建react中的组件时建议基于功能的方法？
谁能回答这个问题，或者给我一些消息来源来理解这个问题？
浏览 0提问于2019-08-20得票数 6
回答已采纳
我已经使用react了一段时间，并阅读了文档，我发现了一些对我来说很奇怪的东西，为什么react重新渲染组件的子元素在父组件的每个状态更改上，即使子道具是相同的?？为什么我要把我的组件包装在Memo()中以防止这种重现呢？将Memo设置为每个react组件的默认设置，或者我是否应该对所有组件都使用它，并不是更好。
浏览 4提问于2021-04-22得票数 2
1回答
我试着在登录我的React后重定向用户，但是导航不起作用，我不知道为什么.
这是我的代码，谢谢你的帮助
import React, { Component } from "react";
import {Route, Navigate} from 'react-router-dom';
import Bouton from "../components/Bouton";
class Dallan extends Component{
logout = () =>{
localStorage.removeItem(&
浏览 5提问于2022-01-17得票数 5
回答已采纳
18回答
我正在用ES6 (使用BabelJS)编写一个简单的组件，但函数this.setState不起作用。
典型的错误包括以下内容
无法读取未定义的属性“”setState“”
或
this.setState不是一个函数
你知道为什么吗？代码如下：
import React from 'react'
class SomeClass extends React.Component {
constructor(props) {
super(props)
this.state = {inputContent: 'startValue'}
}
浏览 103提问于2015-04-11得票数 239
回答已采纳
2回答
我想知道我是否可以在react中做到这一点，我想从JS文件中调用react组件的函数或方法，这样我就可以更改该组件的状态。
例如，我有以下三个文件
第一个App.js
import React,{Component} from 'react';
import Login from './Login';
class App extends Component{
constructor(){
super();
this.state = {session:false}
}
changeStateSession
浏览 3提问于2018-03-07得票数 1
2回答
我正在使用来实现React中的表结构，我试图为此添加编辑按钮和onClick函数，但它不起作用。
我的代码:
render(){
function test(){
alert("asd");
}
function imgFormatter(cell,row) {
return '<a href="#" onClick="test();"><i class="fa fa-pencil" aria-
hidden=&
浏览 2提问于2017-07-10得票数 1
回答已采纳
1回答
为什么我不能运行这个调度函数？
、、、、
我不知道为什么我不能让这个分派函数到达console.log(3)和console.log(4)，我试图从success函数内部转移分派，但同样不起作用。 export const getDistance = (storeLocation) => {
console.log('called1')
const options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0,
};
const success = (pos)
浏览 4提问于2020-08-15得票数 1
我试图在react中使用toFixed方法，但得到了编译时错误。
我想要对结果进行四舍五入，这样第二个数字之后就会有小数，例如(79.222)
<div id='location-longitude'><strong>Percent survival : </strong><p>
<strong> {props.density.toFixed(2) /10 *50 } </strong> % chance of
survival </p>
</div>
<br&
浏览 0提问于2019-04-11得票数 0
我想更新两个组件之间的状态，我的react知识有点生疏，但这就是我构建组件的方式。
子组件-向API端点发出get请求，并将数据呈现到我的图表库中
export default class EmployerLearningNeeds extends Component {
constructor(props) {
super(props)
this.state = {
employerData: [],
}
}
componentDidMount() {
this.fe
浏览 0提问于2019-12-02得票数 0
3回答
在javascript类constructor()中获取数据是一种好的做法吗？
例如，在react类constructor()中，我找到的每个教程都在componendDidMount()中获取数据，但没有人质问为什么我们不能在constructor()中这样做。
这个问题与javascript类有关，不仅仅是react。
浏览 3提问于2019-03-15得票数 13
我在我的一个项目中使用react-native-responsive-linechart。但是工具提示没有正确显示，因为测试有点长，而且我也不能添加新的行。在正式文档中，有一个添加自定义工具提示的过程，但我无法在最上面显示一个适当的技巧。如果有人提供了一个为react-native-responsive-linechart实现的示例自定义工具提示示例，将会很有帮助。
浏览 5提问于2022-05-10得票数 0
为什么复选框上onChange的expect()不起作用？
我正在尝试编写一个测试，以确保在用户更改checkbox的状态时调用onChange函数。我刚开始在React中使用Jest，我看不出有什么问题。任何帮助和工作示例都会很好。Tnx。
Checkbox.js：
import React from 'react';
function Checkbox(props) {
const { checked, onChange } = props;
return (
<input onChange={(e) => onChange
浏览 0提问于2020-06-06得票数 0
我正在尝试将react-spring动画库导入到基于react组件类的reactjs应用程序中。 似乎新的(截至2019年) React Hooks让集成变得更加混乱。 因此，这就是为什么我要问如何在使用类的ReactJS应用程序中使用react-spring，它反过来使用react钩子。 不能正常工作的代码如下所示： import React from 'react';
import { useSpring, animated, interpolate } from 'react-spring'
export default class TestAnim
浏览 11提问于2019-04-29得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
