javascript - 使用 React 道具和 Axios 更新列表不起作用

Question

我有一个从列表中的 API 接收到的对象列表：

  refreshList() {
    axios.get('/api/jobs/list-locations/',{headers:headers}).then(res=>{
      this.setState({
        locations:res.data.map(Locations=>({label:[Locations.country,' ', Locations.region,' ',Locations.zipcode],value:Locations.id}))
      })
    })
    axios.get('/api/jobs/list-departments',{headers:headers}).then(resp=>{
      this.setState({
        departments:resp.data.map(departments=>({label:[departments.name,' ',departments.company_name],value:departments.id}))
      })
    })

  }
  componentDidMount() {
    this.refreshList()
  }

在每个列表旁边我都有一个按钮，可以打开一个表单，用户可以使用这些表单创建一个新位置或一个新部门。我成功地将位置和部门发布到 API，但我希望在添加这些新对象时刷新我的列表。到目前为止，这就是我所做的:(继续前面的代码:)

render() {
    let addModalLocationAdded = () => this.refreshList();
    let addModalDepartmentAdded = () =>this.refreshList();
    return (
         ...
 <Row>
          <Col xs={10}>
            <Select placeholder='Select from pre-created Locations'onChange={handleDropDown('Location')} defaultValue={values.Location} required options={this.state.locations}/> 
          </Col>
          <Col>
          <Button style={{position:'relative',left:'150px' }} onClick={()=>this.setState({addModalLocShow: true})} color='success'>
            New Locations
         </Button>
         <AddLocModal show={this.state.addModalLocShow} onHide={addModalLocClose} onLocationAdded={addModalLocationAdded}/>
          </Col>
        </Row>    
        <br />
        <Row>
         <Col xs={10}>
          <Select placeholder='Select from pre-created Departments'onChange={handleDropDown('Department')} defaultValue={values.Department} required options={this.state.departments}/>
         </Col>
        <Col>
          <Button style={{position:'relative',left:'150px', width:'130px'}} onClick={()=>this.setState({addModalDepShow: true})} color='success'>
            New Department
          </Button>
          <AddDepModal show={this.state.addModalDepShow} onHide={addModalDepClose} onDepartmentAdded={addModalDepartmentAdded} />
        </Col>
        </Row> 

然后在我的(AddLocModal.js)中，例如，我使用了onLocationAdded这样的道具，所以一旦新项目发布到 API，我就会刷新我的列表：

handleSubmit (event) {
    event.preventDefault()
    console.log('handlesubmitshot')
    const headers = {
      'content-type': 'application/json',
      Authorization: 'Token 3a4efb52af35873353a27491ffe54e6551c61391'
    }

    const location = {
      country: event.target.LocationCountry.value,
      region: event.target.LocationRegion.value,
      zip_code: event.target.LocationZipCode.value
    }
    axios(
      {
        method: 'post',
        url: '/api/jobs/set-location/',
        headers: headers,
        data: location
      })
      .then(response => {
        console.log(response)
      })
      .catch(error => {
        console.log(error.response)
      })
      .then(
        this.props.onLocationAdded()
      )
  }

  render () {
    return (
      <Modal
        {...this.props}
....
 <Form onSubmit={this.handleSubmit}>
....

问题是，我收到一个错误，说this.props.onLocationAdded()没有定义。我不知道把它放在哪里，所以我的列表会在信息发布后立即更新。我componentDidUpdate以前在我的原始文件中使用过，但它只在我只有一个表单的 post 方法时才有效，当我为部门添加 post 方法时，它会让我陷入无限循环并且不加载，这就是我分开我的原因refreshlist()来电。如何正确传递该道具以便更新？

编辑：我也第一次使用它，then()但在那里也不起作用

标签： javascriptreactjsaxiosreact-props