score:0

First of all, react is for SPA, if you use reload just use HTTP (no ajax) to edit. Here is solution for SPA

before coding, the main idea is to update your data after edit, so the road map should be:

1.fetch an array from server and store into state.servers, and it should be a list of plain objects that contain your server info

2.when you update, you should apply the update to server and then update to local store, as you did in create/delete, edit is most likely the same thing with more data

then your handleSubmit should be (notice index from iteration as param)

//index from iteration, should be passed from parent component

handleSubmit(index) {
  const data = {
    querymark: this.props.post_data._id,
    servername: this.state.servername,
    jpname: this.state.jpname,
    ipaddress: this.state.ipaddress,
    port: this.state.port,
    priority: this.state.priority
  }
  axios.post('/edit', data).then((response) => {
    if (response.data.success === false) {
      alert("error");
    } else {
      //window.location.reload();
      dispatch(onEditServer(index,data))
    }
  }).catch(() => {})
  this.setState({
    open: false
  })
}

onEditServer should be

const mapDispatchToProps = (dispatch) => {
  return {
    initServers: (servers) => {
      dispatch(initServers(servers))
    },
    onDeleteServer: (serverIndex) => {
      dispatch(deleteServer(serverIndex))
    },
    onEditServer: (index, data) => {
      dispatch(editServer({
        type: 'edit',
        index,
        data,
      }))
    },
    onAddServer: (server) => {
      dispatch(addServer(server))
    }
  }
}

edit reducer

// edit reducer
const edit = (state, action) {
  state.servers[action.index] = actions.data
  return state
}

then changes will take effect automatically


Related Query

More Query from same tag