Question

我反应异常新奇，并且正在构建一个简单的待办事项列表应用程序。我正在尝试编辑子组件中的数据，并将其发送回我的父母。当我打印控制台日志时，似乎已正确设置了父状态，但是子元素没有刷新。我在这里做错了吗？

由于不确定在概念上是否正确，因此我尝试共享整个代码。我是JS新手。调用handleSave（）和handleComplete（）时，我可以看到返回了正确的值并将其设置为我的PArent状态，但是没有刷新子组件。

下面是我的Parent类代码。

class App extends Component {
  state = {
    taskList: [
    ]
  };

  saveEventHandler = data => {
    console.log("I am in saveEventHandler");
    var uniqid = Date.now();
    const taskList = [...this.state.taskList];
    taskList.push({
      id: uniqid,
      taskDescText: data,
      isFinished: false
    });
    console.log(taskList);
    this.setState({'taskList':taskList});
  };

  deleteEventHandler = (index) => {
    const taskList = [...this.state.taskList];
    taskList.splice(index,1)
    this.setState({'taskList':taskList});
  }

  editEventHandler = (index,data) => {
    var uniqid = Date.now();
    console.log("In edit event handler")
    console.log(data)
    console.log(index)
    const taskList = [...this.state.taskList];
    taskList[index] = {
      id: uniqid,
      taskDescText: data,
      isFinished: false
    }
    this.setState({'taskList':taskList});
   console.log(this.state.taskList)
  }

  handleComplete = (index) => {
    console.log("In complete event handler")
    const taskList = [...this.state.taskList];
    const taskDescriptionOnEditIndex = taskList[index]
    taskDescriptionOnEditIndex.isFinished = true
    taskList[index] = taskDescriptionOnEditIndex
    this.setState({'taskList':taskList});
    console.log(this.state.taskList)
  }
  render() {
    return (
      <div className="App">
        <h1>A Basic Task Listing App </h1>

        <CreateTask taskDescription={this.saveEventHandler} />
        {this.state.taskList.map((task, index) => {
          return (
            <Task
              taskDescText={task.taskDescText}
              taskCompleted={task.isFinished}
              deleteTask={() => this.deleteEventHandler(index)}
              editTask={(editTask) => this.editEventHandler(index,editTask)}
              handleComplete={() => this.handleComplete(index)}
              editing='false'
            />
          );
        })}
      </div>
    );
  }
}

export default App;

和我的孩子的班级代码

export default class  Task extends React.Component {
    state = {
        editing : false
    }
    notCompleted = {color: 'red'}
    completed = {color: 'green'}
    textInput = React.createRef();

    constructor(props) {
        super(props);
        this.state = props
      }

      handleEdit = () => {
        this.setState({editing:true});
      }

      handleSave = () => {
        this.props.editTask(this.textInput.current.value);
        this.setState({editing:false});

      };

    editingDiv = (<div className = 'DisplayTask'>
    <span className='TaskDisplayText' style={!this.props.taskCompleted ? this.notCompleted: this.completed}>{this.props.taskDescText} </span>
    <button label='Complete' className='TaskButton' onClick={this.props.handleComplete}> Complete</button>
    <button label='Edit' className='TaskButton' onClick={this.handleEdit}> Edit Task</button>
    <button label='Delete' className='TaskButton' onClick={this.props.deleteTask}> Delete Task</button>
    </div> );

    nonEditingDiv = ( <div className = 'DisplayTask'>
    <input className='TaskDescEditInput' ref={this.textInput}/>
    <button label='Save' className='TaskButton' onClick={this.handleSave} > Save Task</button>
    <button label='Delete' className='TaskButton' onClick={this.props.deleteTask}> Delete Task</button>
    </div>);

    render() {
    return (
    !this.state.editing ? this.editingDiv : this.nonEditingDiv
    )
};
}

Answer 1

在editingDiv方法内移动nonEditingDiv和render()的定义。由于您将它们定义为实例变量，因此它们将被初始化一次，并且永远不会再次使用新的prop值重新呈现。

通过将它们移至render()方法，每次进行道具更新时都会调用render()方法，以获取新的道具值。

反应：更改父状态而不呈现子状态

1 个答案: