setState（）之后的Console.log（）不返回更新状态

• Z时代
• 2024-01-10
• 分类：问答

我创建了一个简单的待办事项列表来学习反应，并且我试图添加一些其他功能。目前，我正在尝试添加用于切换项目列表的按钮，因此它要么显示所有任务，要么仅显示已完成的任务。

我已经编写了一个函数来更改visabilityFilter的状态，以便以后可以使用它来切换列表中的项目，但它的行为不正确。

我在控制台上记录visabilityFilter变量，但是在更改为正确状态之前，它始终显示错误状态。例如，“显示全部”按钮将控制台日志“显示完成”，然后再次按下该按钮将控制台日志“显示全部”

App.js

import React, { Component } from 'react';
import './App.css';
import TodoList from './components/TodoList.js'
import VisabilityFilter from './components/VisabilityFilter.js'
export const SHOW_ALL = 'show_all'
export const SHOW_COMPLETED = 'show_completed'
class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      inputValues: {
        'newTodo': ''
      },
      todos: [
        {
          task: 'My First Todo',
          completed: false
        }
      ],
      visabilityFilter: SHOW_ALL
    }
    this.addTodo = this.addTodo.bind(this)
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleKeyUp = this.handleKeyUp.bind(this)
    this.toggleCompleted = this.toggleCompleted.bind(this)
    this.removeTodo = this.removeTodo.bind(this)
    this.checkCompleted = this.checkCompleted.bind(this)
    this.setVisabilityFilter = this.setVisabilityFilter.bind(this)
  }
  handleInputChange (e) {
      const { inputValues } = this.state
      const { id, value } = e.target
      this.setState({
        inputValues: {
          ...inputValues,
          [id]: value
        }
      })
  }
  handleKeyUp (e) {
    var code = e.key
        if(code === 'Enter') {
          this.addTodo(e);
        }
  }
  toggleCompleted (e, index) {
    const { todos } = this.state
    todos[index].completed = !todos[index].completed
    todos.sort((a, b) => b.completed - a.completed)
    this.setState({ todos })
  }
  removeTodo (e, index) {
    const { todos } = this.state
    this.setState ({ todos: todos.filter((todo, i) => i !== index) })
  }
  addTodo (e) {
      const { todos, inputValues } = this.state
      const { dataset } = e.target
      if (inputValues[dataset.for] === '') return
      const newTodo = { task: inputValues[dataset.for], completed: false }
      todos.push(newTodo)
      this.setState({
        todos,
        inputValues: { ...inputValues, [dataset.for]: '' }
      })
  }
  checkCompleted (e, index) {
    const { todos } = this.state
    return { todos } && todos[index].completed
  }
  setVisabilityFilter (e) {
    const { visabilityFilter } = this.state
    const { dataset } = e.target
    this.setState({
      visabilityFilter: dataset.for
    })
console.log ({ visabilityFilter })
  }
  render() {
    const { todos, inputValues, visabilityFilter } = this.state
    return (
      <div className="App">
        <TodoList
          todos={todos}
          inputValues={inputValues}
          addTodo={this.addTodo}
          handleInputChange={this.handleInputChange}
          removeTodo={this.removeTodo}
          toggleCompleted={this.toggleCompleted}
          handleKeyUp={this.handleKeyUp}
          checkCompleted={this.checkCompleted}
        />
        <VisabilityFilter setVisabilityFilter={this.setVisabilityFilter} />
      </div>
    );
  }
}
export default App;

VisabilityFilter.js

import React from 'react'
import { func } from 'prop-types'
import { SHOW_ALL, SHOW_COMPLETED } from '../App'
const VisabilityFilter = props => {
  return (
    <div>
      <button data-for={SHOW_COMPLETED} onClick={ props.setVisabilityFilter } >
        Show Completed Tasks
      </button>
      <button data-for={SHOW_ALL} onClick={ props.setVisabilityFilter }>
        Show All Tasks
      </button>
    </div>
  )
}
VisabilityFilter.propTypes = {
  setVisabilityFilter: func.isRequired
}
export default VisabilityFilter

回答：

setState()是异步的（React docs），因此状态更改不会立即应用。如果要注销新状态，请setState()接受一个函数作为第二个参数，并在状态更新时执行该函数。所以：

this.setState({ 
    abc: xyz 
  }, 
  () => console.log(this.state.abc),
)

或者您也可以使用componentDidUpdate()，推荐

以上是 setState（）之后的Console.log（）不返回更新状态 的全部内容， 来源链接： utcz.com/qa/414822.html