Question

我正在尝试使用React.js制作一个简单的待办事项列表，而我陷入了这个问题。 todo.isChecked正在设置状态，但是由它确定的新样式不会在单击复选框后立即通知，而是如果我在输入文本中键入内容。

import React from 'react';

import 'bootstrap/dist/css/bootstrap.min.css';
import 'jquery';
import 'bootstrap/dist/js/bootstrap';

import TodoItem from './todoItem'

export default class todoApp extends React.Component{
    constructor() {
        super()
        this.state = {
            todos: [],
            task: ''
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleText = this.handleText.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleChange(id) {
        const todos = this.state.todos
        todos.map( todo => todo.id === id ? todo.isChecked === false ? todo.isChecked = true : todo.isChecked = false : null )
        console.log(this.state.todos)
     }

    handleText(event){
        this.setState( {task: event.target.value} )
    }

    handleSubmit(event){
        event.preventDefault()
        const task = this.state.task.trim()
        if (task.length > 0){
            const id = Math.random().toString(36).substr(2, 9)
            const newTask = { task: task, isChecked: false, id: id }
            const todos = this.state.todos
            todos.push(newTask)
            this.setState({ 
                todos: todos,
                task: ''
            })
        }
    }

    render(){
        const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item} handleChange={this.handleChange}/>)

        return(
        <div class="card bg-dark shadow-lg p-3 mb-5 rounded" style={{width: '18rem'}}>
            <form onSubmit={ this.handleSubmit } id="form">
                <input 
                    type="text" onChange={ this.handleText } 
                    value={ this.state.task } placeholder="New Task" 
                />
                <input type="submit" />
            </form>
            <ul class="list-group list-group-flush">
                <li class="list-group-item bg-dark">{todoItems}</li>
            </ul>
        </div>
        )
    }
}

todoItem.js：

import React from 'react'

export default function TodoItem(props) {
    const isCheckedStyle = {
        fontstyle: "italic",
        color: "#adad85",
        textDecoration:"line-through"
    }

    return(
        <div>
            <input 
                type="checkbox" 
                onChange={() => props.handleChange(props.item.id)}
            />
            <p style={props.item.isChecked ? isCheckedStyle : null} >{props.item.task}</p>
        </div>
    )
}

Answer 1

 handleChange(id) {
        const todos = this.state.todos
        todos.map( todo => todo.id === id ? todo.isChecked === false ? todo.isChecked = true : todo.isChecked = false : null )
        console.log(this.state.todos)
     }

您正在直接修改todo.isChecked，而没有setState。当您这样做时，React无法知道状态已更改，因此必须进行重新渲染。因此，请改用setSate()

Answer 2

在handleChange和handleSubmit中，您都在setState之外修改状态，这在React中是非法的，在handleChange上您甚至没有呼叫setState，因此只需将其更改为（以此类推，handleSubmit）

 handleChange(id) {
        const todos = [...this.state.todos].map( todo => todo.id === id ? { ...todo, isChecked: !todo.isChecked } : todo ) // adding [...  ] for shallow copy and not pointing
        this.setState({todos})
  }

React.js setState不通知

2 个答案: