Reactjs 对此作出反应。设置状态不重新招标_Reactjs

Reactjs 对此作出反应。设置状态不重新招标

reactjs

Reactjs 对此作出反应。设置状态不重新招标,reactjs,Reactjs,所以我有一节课： class TaskList extends Component { constructor(props) { super(props); this.state = { tasks: [] }; this.handleDelete = this.handleDelete.bind(this); this.handleEdit = this.handleEdit.bind(this); } componentWi

所以我有一节课：

class TaskList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: []
    };

    this.handleDelete = this.handleDelete.bind(this);
    this.handleEdit = this.handleEdit.bind(this);
  }

  componentWillMount() {
    axios.get("/api/all").then(result => {
      this.setState({
        tasks: result.data
      });
    });
  }

  handleDelete(id) {
    axios.delete(`/api/${id}`).then(res => {
      axios.get("/api/all").then(tasks => {
        this.setState({
          tasks: tasks.data
        });
      });
    });
  }

  handleEdit(id, updatedTask) {
    axios.put(`/api/${id}`, updatedTask).then(res => {
      axios.get("/api/all").then(tasks => {
        console.log(tasks);
        this.setState({
          tasks: tasks.data
        });
      })
      .catch(err => {
        console.log(err);
      })
    }).catch(err => {
      console.log(err);
    });
  }
  render() {
    const { tasks } = this.state;
    console.log('list render');
    console.log(this.state);
    return (
      <div className="container">
        <div className="title row col-lg-6 mx-auto">
          <div className="col-sm-4">{"Date"}</div>
          <div className="col-sm-4">{"Task"}</div>
          <div className="col-sm-4">{"Status"}</div>
        </div>
        {tasks.map(i => (
          <div className={`${i._id} task mx-auto col-lg-6`}>
            <div className={`${i._id} row`}>
              <Task
                key={i._id}
                id={i._id}
                title={i.title}
                date={i.date}
                complete={i.complete}
                handleDelete={this.handleDelete}
                handleEdit={this.handleEdit}
              />
            </div>
          </div>
        ))}
      </div>
    );
  }
}

类任务列表扩展组件{
建造师（道具）{
超级（道具）；
此.state={
任务：[]
};
this.handleDelete=this.handleDelete.bind（this）；
this.handleEdit=this.handleEdit.bind（this）；
}
组件willmount（）{
get（“/api/all”）。然后（结果=>{
这是我的国家({
任务：result.data
});
});
}
handleDelete（id）{
delete（`/api/${id}`）。然后（res=>{
get（“/api/all”）。然后（任务=>{
这是我的国家({
任务：tasks.data
});
});
});
}
handleEdit（id，UpdateTask）{
put（`/api/${id}`，updateTask）。然后（res=>{
get（“/api/all”）。然后（任务=>{
console.log（任务）；
这是我的国家({
任务：tasks.data
});
})
.catch（错误=>{
控制台日志（err）；
})
}).catch（错误=>{
控制台日志（err）；
});
}
render（）{
const{tasks}=this.state；
log（'list render'）；
console.log（this.state）；
返回(
{“日期”}
{“任务”}
{“状态”}
{tasks.map（i=>(
))}
);
}
}

任务组件

class Task extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(props.date),
      complete: props.complete
    };

    this.handleDelete = this.handleDelete.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleDelete() {
    this.props.handleDelete(this.props.id);
  }

  handleClick() {
    const updatedTask = {
      title: this.props.title,
      complete: !this.state.complete
    };
    this.setState({ complete: !this.state.complete });
    this.props.handleEdit(this.props.id, updatedTask);
  }

  render() {
    const { title } = this.props;
    const { date, complete} = this.state;
    return (
      <>
        <div className='col-sm-4'>
          {date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate()}
        </div>
        <div className="col-sm-4">{title}</div>
        <div className="col-sm-3" onClick={this.handleClick}><Status complete={complete}/></div>
        <div className="col-sm-1" onClick={this.handleDelete}><IconClose /></div>
      </>
    );
  }
}

const Status = props => {
  console.log(props);
  return (
    <>
      {props.complete ? (
        <i className="far fa-check-square" />
      ) : (
        <i className="far fa-square" />
      )}
    </>
  );
};

类任务扩展组件{
建造师（道具）{
超级（道具）；
此.state={
日期：新日期（道具日期），
完成：道具
};
this.handleDelete=this.handleDelete.bind（this）；
this.handleClick=this.handleClick.bind（this）；
}
handleDelete（）{
this.props.handleelete（this.props.id）；
}
handleClick（）{
常量更新任务={
标题：this.props.title，
完成：！this.state.complete
};
this.setState（{complete:！this.state.complete}）；
this.props.handleEdit（this.props.id，updateTask）；
}
render（）{
const{title}=this.props；
const{date，complete}=this.state；
返回(
{date.getFullYear（）+“/”+date.getMonth（）+“/”+date.getDate（）}
{title}
);
}
}

状态组件

class Task extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(props.date),
      complete: props.complete
    };

    this.handleDelete = this.handleDelete.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleDelete() {
    this.props.handleDelete(this.props.id);
  }

  handleClick() {
    const updatedTask = {
      title: this.props.title,
      complete: !this.state.complete
    };
    this.setState({ complete: !this.state.complete });
    this.props.handleEdit(this.props.id, updatedTask);
  }

  render() {
    const { title } = this.props;
    const { date, complete} = this.state;
    return (
      <>
        <div className='col-sm-4'>
          {date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate()}
        </div>
        <div className="col-sm-4">{title}</div>
        <div className="col-sm-3" onClick={this.handleClick}><Status complete={complete}/></div>
        <div className="col-sm-1" onClick={this.handleDelete}><IconClose /></div>
      </>
    );
  }
}

const Status = props => {
  console.log(props);
  return (
    <>
      {props.complete ? (
        <i className="far fa-check-square" />
      ) : (
        <i className="far fa-square" />
      )}
    </>
  );
};

const Status=props=>{
控制台日志（道具）；
返回(
{props.complete(
) : (
)}
);
};

我的问题是我的手上，但我没有让组件与更新的任务列表一起重新渲染。handleDelete功能可以正常工作并更新屏幕，但不更新编辑

我一直认为setState会导致重新渲染，然后我也尝试了forceUpdate，但它也不起作用

任何帮助都会很好。

我认为这里的问题是道具进入状态

在

任务

内部，代码调用

this.props.handleEdit（this.props.id，updateTask）

，它将数据发送到父组件

任务列表

。该

handleEdit

功能更新

TaskList

的状态键

tasks

但是，当每个任务的完整性状态传递到

任务

时，其从

道具

分叉到其自己的组件状态：

this.state = {
  ...
  complete: props.complete
};

构造函数

函数只调用一次<代码>道具。完成无法再次更新状态。我的建议是在从

任务列表

传递道具时使用道具，除非出于特定原因必须将其完整性值存储在

任务

中

React文档解释了这种常见的反模式：

问题在于它既不必要（您可以直接使用

this.props.color

），又会产生错误（对颜色道具的更新不会反映在状态中）

仅当您有意忽略道具更新时才使用此模式