Question

我有新的反应，我有一个问题。我有两个组件，父组件 - 目标和子 - EditGoal。目标组件呈现所有目标，结束EditGoal组件编辑目标名称。在子组件完成修改后，它将数据保存在数据库中，并通过props我在父组件中执行一个函数。该功能设定了状态。这应该导致父组件重新呈现。但由于某些原因，父组件不会重新渲染。我无法弄清楚原因。我想重新渲染父组件的原因，以便我可以获得一个包含更新的目标列表，这些目标只是由孩子完成的。父组件为什么不重新渲染的任何想法？或者我如何绕过它？我真的很感激任何建议！

目标组件：

import React, { Component } from 'react';
import Goal from './Goal';
import EditGoal from './EditGoal';

import moment from 'moment';

class Goals extends Component {
  constructor(props) {
    super(props);

    this.state = {
      goals: [],
      editingGoalId: 0,
      update: 'false'
    };
    this.getGoals = this.getGoals.bind(this);
    this.populateGoals = this.populateGoals.bind(this);
    this.deleteGoal = this.deleteGoal.bind(this);
    this.editGoal = this.editGoal.bind(this);
    this.updateGoals = this.updateGoals.bind(this);
  }

  componentDidMount(){
    this.getGoals();
  }



  componentWillUpdate(nextProps, nextState){
console.log('will updated worked!')
  }

  getGoals() {
    $.ajax({
      url: `/api/v1/goals.json`,
      method: 'GET',
      success: this.populateGoals
    });
  }

  populateGoals(data) {
    this.setState({ goals: data.goals });
  }

  deleteGoal(goal) {
    $.ajax({
      url: `/api/v1/goals/${goal.id}`,
      method: 'DELETE'
    })
    .done((data) => {
      this.getGoals();
      console.log('Goal deleted!');

    })
    .fail((response) => {
      console.log.error('There was a problem deleting that goal.');
    });
  }

  editGoal(goal) {
    this.setState({ editingGoalId: goal.id })
  }

  updateGoals(name) {
  let goals = this.state.goals;

  goals = goals.map((currentGoal) =>{
    if(currentGoal.id == this.state.editingGoalId) {
      currentGoal.name = name;
    }
    return currentGoal;
  });

  this.setState({ goals: goals});

  console.log(this.state.goals);
  }

  render() {

    let goals = this.state.goals.map(goal => {
      if(this.state.editingGoalId === goal.id) {
        return(
          <EditGoal key={goal.id}
                    name={goal.name}
                    description={goal.description}
                    dueTime={moment(goal.due_time).format("MMMM Do YYYY, h:mm a")}
                    goal={goal}
                    update={this.updateGoals}
           />
          );
       } else {
         return(
          <Goal key={goal.id}
                name={goal.name}
                description={goal.description}
                startDate={moment(goal.created_at).format("MMMM Do YYYY, h:mm a")}
                dueTime={moment(goal.due_time).format("MMMM Do YYYY, h:mm a")}
                deadline={goal.due_time}
                goal={goal}
                onDelete={this.deleteGoal}
                onEdit={this.editGoal}
          />
          );
        }
    });
  return(
    <div>
      <h1>Goals</h1>
      <div>
        {goals}
      </div>
    </div>
    );
  }
}

export default Goals;

修改目标组件：

import React, { Component } from 'react';
import Goal from './Goal';

class EditGoal extends Component {
  constructor(props){
    super(props);
    this.state = {
      updateGoalErrors: [],
      name: '',
      id: '',
      updatedDescription: '',
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.getNameValue = this.getNameValue.bind(this);
  }

  componentDidMount() {
    this.getNameValue();
  }

  getNameValue(name) {
    this.setState({name: this.props.name});
    this.setState({id: this.props.goal.id});
  }

  handleChange(event) {
    this.setState({name: event.target.value })
  }

  handleSubmit(event){
    event.preventDefault();
    $.ajax({
      url: `/api/v1/goals/${this.state.id}`,
      method: 'PUT',
      dataType:'json',
      contentType: 'application/json',
      data: JSON.stringify({ name: this.state.name })
    })
    .done((data) => {
      if (data.errors) {
        this.setState({ updateGoalErrors: data.errors });
      } else {
        console.log("Goal updated in database")
        this.props.update(this.state.name);
      }
    });
  }

  render() {
    return(
      <form onSubmit={this.handleSubmit}>
        <div>
          <textarea value={this.state.name}
                    onChange={this.handleChange} />
        </div>
        <input type="submit" value="Save" />
      </form>
    );
  }
}

export default EditGoal;

Answer 1

在这里，我可以看到你在componentDidMount编写了一个ajax调用，它将调用组件的第一个生命周期，在编辑目标之后你刚刚将状态update更新为true，但是不是目标列表。

您可以在重新呈现update组件上的setState之后对其进行调试，但是在将其更新到数据库之后，您还没有更新目标列表。

Answer 2

因此更新像Dipti Tiwari这样的州的目标列表确实有帮助。感谢那！此外，我必须将editingGoalId设置为0，否则它将呈现子组件。

updateGoals(name) {
 let goals = this.state.goals;

  goals = goals.map((currentGoal) =>{
    if(currentGoal.id == this.state.editingGoalId) {
      currentGoal.name = name;
    }
    return currentGoal;
  });

  this.setState({ goals: goals});
  this.setState({editingGoalId: 0 })

  console.log(this.state.goals);
  }

自从我处理这段代码以来已经有一段时间了，所以如果我在那里发表声明，我完全忘了这一点。

什么阻止React组件重新渲染

2 个答案: