Question

在下面的代码中，我希望ListItem组件在handleOnAdd和handleOnUpdate上刷新。

这些函数作为道具传递给AddItem和EditItem组件。

ListItem组件从item的状态获取其App。

它对handleOnDelete很好用，因为我添加了.then(this.handleChange())。我对handleOnAdd和handleOnUpdate做同样的事情，但是它们不会触发重新加载...。

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      items: [{ "_id": { "$oid": "5f1fda0169e133382277a4ef" }, "title": "Blabla", "description": "adfadfd211233", "__v": 0 }]
    }

    this.handleOnUpdate = this.handleOnUpdate.bind(this);
    this.handleOnAdd = this.handleOnAdd.bind(this);
    this.handleOnDelete = this.handleOnDelete.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    Axios.get('http://localhost:4200/items')
      .then(res => {
        this.setState({ items: res.data })
      })
      .catch(function (error) {
        console.log(error)
      })
  }

  handleChange() {
    Axios.get('http://localhost:4200/items')
      .then(res => {
        this.setState({ items: res.data })
      })
      .catch(function (error) {
        console.log(error)
      })

  }

  handleOnAdd(item) {
    Axios.post('http://localhost:4200/items/add/', item)
      .then(res => console.log(res.data))
      .then(this.handleChange());
  }

  handleOnUpdate(id, item) {
    Axios.post('http://localhost:4200/items/update/' + id, item)
      .then(res => console.log(res.data))
      .then(this.handleChange());

  }

  handleOnDelete(id) {
    Axios.get('http://localhost:4200/items/delete/' + id)
      .catch(err => console.log(err)).then(this.handleChange());
  }

  render() {
    return (
        .... Router stuff....
        <Route exact path='/add' render={(props) => <AddItem {...props} handleOnAdd={(item) => this.handleOnAdd(item)} />} />
        <Route path='/edit/:id' render={(props) => <EditItem {...props} handleOnUpdate={(id, item) => this.handleOnUpdate(id, item)} />} />
        <Route path='/index' render={(props) => <ListItem {...props} handleOnDeleteInApp={(id) => this.handleOnDelete(id)} items={this.state.items} />} />
        .... Router stuff....

    );
  }
}

任何人都可以发现为什么handleOnDelete以及随后的状态更改成功触发ListItem的重新提交，而其他功能却没有吗？

Answer 1

height: MediaQuery.of(context).size.height \ 2

此代码立即调用.then(this.handleChange()); ，然后将其结果传递给handleChange。因此，此代码不等待前几行中的添加/更新/删除。如果.then工作正常，那么我认为那仅仅是由于比赛条件。

您应该将所有三个功能的这一行更改为：

handleOnDelete

或

.then(() => this.handleChange())

Axios调用后的.then中的setState之后，组件未重新呈现

1 个答案: