setstate 相关问题

我正在开发一个待办事项应用程序。这是有问题的代码的一个非常简化的版本。我有一个复选框：我正在开发一个待办事项应用程序。这是有问题的代码的一个非常简化的版本。我有一个复选框： <p><input type="checkbox" name="area" checked={this.state.Pencil} onChange={this.checkPencil}/> Writing Item </p> 这是调用复选框的函数： checkPencil(){ this.setState({ pencil:!this.state.pencil, }); this.props.updateItem(this.state); } updateItem 是一个映射到调度到 redux 的函数 function mapDispatchToProps(dispatch){ return bindActionCreators({ updateItem}, dispatch); } 我的问题是，当我调用 updateItem 操作和 console.log 状态时，它总是落后 1 步。如果该复选框未选中且不为 true，我仍然会将 true 状态传递给 updateItem 函数。我需要调用另一个函数来强制状态更新吗？您应该调用第二个函数作为 setState 的回调，因为 setState 是异步发生的。比如： this.setState({pencil:!this.state.pencil}, myFunction) 但是，在您的情况下，由于您希望使用参数调用该函数，因此您必须更有创意，也许可以创建自己的函数来调用道具中的函数： myFunction = () => { this.props.updateItem(this.state) } 将它们组合在一起就可以了。由于各种原因（主要是性能），在 React 中调用 setState() 是异步的。在幕后，React 将对 setState() 的多次调用批量化为单个状态突变，然后重新渲染组件一次，而不是为每个状态更改都重新渲染。幸运的是，解决方案相当简单 - setState接受回调参数： checkPencil: () => { this.setState(previousState => ({ pencil: !previousState.pencil, }), () => { this.props.updateItem(this.state); }); } 在 Ben Hare 的回答中，如果有人想使用 React Hooks 实现相同的目标，我在下面添加了示例代码。 import React, { useState, useEffect } from "react" let [myArr, setMyArr] = useState([1, 2, 3, 4]) // the state on update of which we want to call some function const someAction = () => { let arr = [...myArr] arr.push(5) // perform State update setMyArr(arr) // set new state } useEffect(() => { // this hook will get called every time myArr has changed // perform some action every time myArr is updated console.log('Updated State', myArr) }, [myArr]) 当您使用当前状态的属性更新状态时，React 文档建议您使用 setState 的函数调用版本而不是对象。所以 setState((state, props) => {...}) 而不是 setState(object)。原因是setState更多的是要求状态改变而不是立即改变。 React 会批量处理这些 setState 要求的性能改进。意味着您正在检查的状态属性可能不稳定。这是一个需要注意的潜在陷阱。有关更多信息，请参阅此处的文档：https://facebook.github.io/react/docs/react-component.html#setstate 为了回答你的问题，我会这样做。 checkPencil(){ this.setState((prevState) => { return { pencil: !prevState.pencil }; }, () => { this.props.updateItem(this.state) }); } 这是因为它是异步发生的，所以意味着那时可能还没有更新...... 根据 React v.16 文档，您需要使用 setState() 的第二种形式，它接受函数而不是对象：状态更新可能是异步的 React 可以将多个 setState() 调用批处理为单个更新性能。因为 this.props 和 this.state 可能会异步更新，你不应依赖它们的值来计算下一个状态。例如，此代码可能无法更新计数器： // Wrong this.setState({ counter: this.state.counter + this.props.increment, }); 要修复它，请使用接受函数的第二种形式的 setState() 而不是一个物体。该函数将接收之前的状态作为第一个参数，以及应用更新时的 props 作为第二个参数： // Correct this.setState((prevState, props) => ({ counter: prevState.counter + props.increment })); 首先设置你的值。继续你的工作后。 this.setState({inputvalue: e.target.value}, function () { this._handleSubmit(); }); _handleSubmit() { console.log(this.state.inputvalue); //Do your action } 我使用了 rossipedia 和 Ben Hare 的建议并执行了以下操作： checkPencil(){ this.setState({ pencil:!this.state.pencil, }, this.updatingItem); } updatingItem(){ this.props.updateItem(this.state) } Ben 对于如何解决眼前的问题有一个很好的答案，但我也建议避免重复状态如果状态处于 redux 状态，则您的复选框应该从 prop 或 store 读取自己的状态，而不是在其自己的组件和全局 store 中跟踪检查状态做这样的事情： <p> <input type="checkbox" name="area" checked={this.props.isChecked} onChange={this.props.onChange} /> Writing Item </p> 一般规则是，如果您发现多个地方都需要某个状态，请将其提升到一个共同的父级（并不总是 redux）以保持仅具有单一事实来源试试这个 this.setState({inputvalue: e.target.value}, function () { console.log(this.state.inputvalue); this.showInputError(inputs[0].name); }); showInputError 函数用于验证（如果使用任何表单）如上所述，setState()本质上是异步的。我简单地使用asyncawait解决了这个问题。这里有一个例子供参考： continue = async (e) => { e.preventDefault(); const { values } = this.props; await this.setState({ errors: {} }); const emailValidationRegex = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i; if(!emailValidationRegex.test(values.email)){ await this.setState((state) => ({ errors: { ...state.errors, email: "enter a valid email" } })); } } 这是基于 React Hooks 的解决方案。由于 React useState 异步更新状态，如果需要查看这些更改，请在 useEffect 挂钩中检查它们。确保每次使用变量时都在useState中给出initialState。就像第 1 行和第 2 行一样。如果我没有在其中提供任何内容，它将通过双击来填充错误变量。 1) let errorsArray = []; 2) let [errors, setErrors] = useState(errorsArray); 3) let [firstName, setFirstName] = useState(''); 4) let [lastName, setLastName] = useState(''); let [gender, setGender] = useState(''); let [email, setEmail] = useState(''); let [password, setPassword] = useState(''); const performRegister = () => { console.log('firstName', isEmpty(firstName)); if (isEmpty(firstName)) { console.log('first if statement'); errorsArray.push({firstName: 'First Name Cannot be empty'}); } if (isEmpty(lastName)) { errorsArray.push({lastName: 'Last Name Cannot be empty'}); } if (isEmpty(gender)) { errorsArray.push({gender: 'Gender Cannot be empty'}); } if (isEmpty(email)) { errorsArray.push({email: 'Email Cannot be empty'}); } if (isEmpty(password)) { errorsArray.push({password: 'Password Cannot be empty'}); } console.log('outside ERRORS array :::', errorsArray); setErrors(errorsArray); console.log('outside ERRORS :::', errors); if (errors.length > 0) { console.log('ERROR exists'); } }; BEST WAY TO KEEP CONSOLE LOG AND CHECK WHETHER THE USE EFFECT HOOK is TRIGGERING OR NOT ON EACH TIME WHEN WE SET const [multiSelectList, setMultiSelectList] = useState<string[]>(); setMultiSelectList(multiDropDownValues); useEffect(()=>{ console.log("triggers from combo multi on multiSelectList changes"+JSON.stringify(multiSelectList)); },[multiSelectList]); 您还可以像下面一样更新状态两次并立即更新状态，这对我有用： this.setState( ({ app_id }) => ({ app_id: 2 }), () => { this.setState(({ app_id }) => ({ app_id: 2 })) } )

reactjs redux state setstate

回答 14 投票 0

如何正确修改React.js中的状态数组

我试图找到在react.js中使用“setState”将新元素设置到数组中的当前修改。我尝试的所有操作都没有将新元素添加到数组中，它只是用它替换了它......

javascript reactjs react-native setstate

回答 2 投票 0

有人能解释一下为什么条件渲染修复了reactjs中setState的异步问题吗？

所以我正在制作一个小博客文章项目，在这个项目中我调用了状态“mainblog”和“relatedBlogs”的API。当我尝试将 mainBlog 传递给组件“Post”时，它给出...

javascript reactjs asynchronous react-hooks setstate

回答 1 投票 0

onChange 在没有回调的情况下无法按预期工作

这段代码给了我一个严重的 setState 错误。我希望 onChange 中的代码在 onChange 之后立即运行，而不需要回调 ()=>，因为我希望在所有表单字段都存在时禁用按钮...

javascript reactjs onchange formik setstate

回答 1 投票 0

颤振消息“构建期间调用了 setState() 或 markNeedsBuild()”

我对以下代码有问题。我收到消息“在构建期间调用 setState() 或 markNeedsBuild()”，但我不知道该怎么做才能使代码正确运行。这个想法是创造...

flutter dart build setstate

回答 1 投票 0

setstate 相关问题

最新问题