Javascript 如何使用react从数据库中获取正确的数据

我使用nodejs+react+redux创建了一个页面。 我在页面上做了一个编辑按钮，想编辑我的数据

现在我选择KUMAMOTO CTI，把优先级从5改为10。我用Ajax从数据库中获取数据来填补空白。在提交之前，我可以从数据库中得到正确的数据。但是当我改变优先级并点击再次编辑它时，填充的数据将是错误的。我必须刷新它来获得正确的数据。< /P> 有时会变成这样：

有人能告诉我怎么解决吗

图为：

这是我的密码

server.js

const Koa = require('koa')
const Router = require('koa-router')
const cors = require('koa2-cors')
const app = new Koa()
const router = new Router()
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import serversReducer from '../client/reducers/reducer'
import { renderToString } from 'react-dom/server'

const store = createStore(serversReducer)

const views = require('koa-views')
const co = require('co')
const convert = require('koa-convert')
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')
const debug = require('debug')('koa2:server')
const path = require('path')
//const ReactDOMServer = require('react-dom/server')
const React = require('react')
const config = require('./config')
const routes = require('./routes')
const mongoose = require('mongoose')
const stateSchema = require('./models/State')
const mission = require('./models/port')
const port = process.env.PORT || config.port

import Main from '../client/containers/Main'

mongoose.connect('mongodb://127.0.0.1:27017/monitor', {
    useMongoClient: true
});
mongoose.Promise = global.Promise;

var State = mongoose.model("State", stateSchema);

// error handler
onerror(app)
// middlewares
app.use(bodyparser())
    .use(json())
    .use(logger())
    .use(cors())
    .use(require('koa-static')(__dirname + '/public'))
    .use(views(path.join(__dirname, '/views'), {
        options: {
            settings: {
                views: path.join(__dirname, 'views')
            }
        },
        map: {
            'ejs': 'ejs'
        },
        extension: 'ejs'
    }))
    .use(router.routes())
    .use(router.allowedMethods())

// logger
app.use(async(ctx, next) => {
    const start = new Date()
    await next()
    const ms = new Date() - start
    console.log(`${ctx.method} ${ctx.url} - $ms`)
})

router.get('/', async(ctx, next) => {

    const staticMarkup = await renderToString(
        <Provider store={store}>
            <Main />
        </Provider>
    )

    const preloadedState = store.getState();
    //console.log(preloadedState);

    await ctx.render('index', {
        reduxData: preloadedState,
        helloComponentMarkup: staticMarkup
    })
})

router.post('/show', async(ctx, next) => {

    ctx.body = 'ok';
    let newArray = [];

    await State.find({}, function(err, doc) {
        if (err) {
            return;
        }
        doc.forEach(function(element, index) {
            newArray.push(element);
        })
        ctx.response.body = JSON.stringify(newArray);
    }).sort({
        priority: 1
    })
})

router.post('/edit', async(ctx, next) => {

    ctx.body = 'ok'

    await State.update({
        _id: ctx.request.body.querymark
    }, {
        $set: {
            server_name: ctx.request.body.servername,
            jp_name: ctx.request.body.jpname,
            ip_address: ctx.request.body.ipaddress,
            port: ctx.request.body.port,
            priority: ctx.request.body.priority
        }
    }, function(err, doc) {
        if (err) {
            return;
        }
    })
})

router.post('/create', async(ctx, next) => {

    ctx.body = 'ok'

    await new State({
        server_name: ctx.request.body.servername,
        jp_name: ctx.request.body.jpname,
        ip_address: ctx.request.body.ipaddress,
        port: ctx.request.body.port,
        priority: ctx.request.body.priority
    }).save(function(err) {
        if (err)
            console.log(err.toString());
    })
})

router.post('/delete', async(ctx, next) => {

    ctx.body = 'ok'

    await State.remove({
        _id: ctx.request.body.id
    }, function(err, doc) {
        if (err) {
            return;
        }
    });
})

routes(router)

app.on('error', function(err, ctx) {
    console.log(err)
    logger.error('server error', err, ctx)
})

module.exports = app.listen(config.port, () => {
    console.log(`Listening on http://localhost:${config.port}`)
    console.log(__dirname);
})

SegmentList.js

import React, { Component, PropTypes } from 'react'
import ListContainer from '../containers/ListContainer'


export default class SegmentList extends Component {
    static propTypes = {
        posts_data: PropTypes.array,
        onDeleteServer: PropTypes.func,
    //onEditServer: PropTypes.func
    }
    static defaultProps = {
        posts_data: []
    }

    handleDeleteServer(index) {
        if (this.props.onDeleteServer) {
            this.props.onDeleteServer(index)
        }
    }

    /*handleEditServer(index) {
        if (this.props.onEditServer) {
            this.props.onEditServer(index)
        }
    }*/

    render() {
        return (
            <div>
                {this.props.posts_data.map((data, i) => <ListContainer
                post_data={data}
                key={i}
                index={i} onDeleteServer={this.handleDeleteServer.bind(this)} />
            )}
            </div>
        )
    }
}

---

首先，react是针对SPA的，如果您使用reload，那么只需使用HTTP而不使用ajax进行编辑。这是SPA的解决方案

在编码之前，主要想法是在编辑后更新数据，因此路线图应为：

1.从服务器获取一个数组并存储到state.servers，它应该是包含服务器信息的普通对象列表

2.更新时，应将更新应用于服务器，然后将更新应用于本地存储，正如在“创建/删除”中所做的那样，编辑很可能与更多数据相同

然后您的handleSubmit应该是作为param的迭代索引

//迭代中的索引应该从父组件传递 可操纵性指数{ 常数数据={ querymark:this.props.post_data._id， 服务器名：this.state.servername， jpname:this.state.jpname， IP地址：this.state.ipaddress， 港口：this.state.port， 优先级：this.state.priority } axios.post'/edit'，data.thenresponse=>{ 如果response.data.success==false{ 警报错误； }否则{ //window.location.reload； dispatchonEditServerindex，数据 } }.catch=>{} 这是我的国家{ 开放：假 }

---

}谢谢。根据你的评论，我编辑了我的代码，但它仍然有同样的问题。我编辑了我的问题。你能告诉我哪里出错了吗？@RunChicken onEditServer，dispatcheneditserverindex中的数据，数据没有分配，不是吗？我会将这些代码背后的想法更新到我的答案我可以看到更改，但当我想再次编辑相同的数据时，它无法获得正确的数据。如果您的意思是其他人可能会更改数据，那么您需要在服务器信息中添加一个版本，并同时处理后端和前端案例编辑服务器：返回{服务器：[…state.servers，state.servers[action.index]=action.data]}这不是将数据分配给正确的索引，如果您希望它更不可变，则返回[…state.slice0，action.index，Object.assign{}，state[action.index]，{done:true}，…state.sliceaction.index+1]或只返回Object.assign即可

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { Container, Loader, Table, Grid, Icon, Button, Modal, Form } from 'semantic-ui-react'
import SegmentList from '../components/SegmentContainer'
import { initServers, deleteServer, editServer } from '../reducers/reducer'
import MenuFix from '../components/Menu'
const axios = require('axios')

class SegmentContainer extends Component {
    static propTypes = {
        servers: PropTypes.array,
        initServers: PropTypes.func,
        onDeleteServer: PropTypes.func,
        onAddServer: PropTypes.func
    }

    constructor() {
        super()
        //this._loadData()
        this.state = {
            servername: '',
            jpname: '',
            ipaddress: '',
            priority: ''
        }
    }

    componentWillMount() {
        this._loadData()
    }

    componentDidMount() {
        if (this.timer) {
            clearInterval(this.timer)
        }
        this.timer = setInterval(() => {
            this._loadData()
        }, 3000)
    }

    componentWillUnmount() {
        clearInterval(this.timer)
    }

    _loadData() {
        let sorted_data = [];
        let posts_data = [];
        let response = axios.post('/show')
            .then((response) => {
                Object.keys(response.data).forEach(function(index) {
                    sorted_data.push(response.data[index]);
                })

                function _dataCompare(a, b) {
                    if (a.priority > b.priority)
                        return 1;
                    if (a.priority < b.priority)
                        return -1;
                    return 0;
                }

                sorted_data.forEach((item, index) => {
                    posts_data.push(item);
                })
                posts_data.sort(_dataCompare);
                this.props.initServers(posts_data)
            //dispatch(initServers(posts_data))
            }).catch(() => {
        })

    }

    handleDeleteServer(index) {
        const {servers} = this.props
        axios.post('/delete', {
            id: servers[index]._id
        }).then((response) => {
            if (response.data.success === false) {
                alert("error");
            } else {
                window.location.reload();
            }
        }).catch(() => {
        })
        if (this.props.onDeleteServer) {
            this.props.onDeleteServer(index)
        }
    }

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

    handleCreate(server) {
        axios.post('/create', {
            servername: this.state.servername,
            jpname: this.state.jpname,
            ipaddress: this.state.ipaddress,
            port: this.state.port,
            priority: this.state.priority
        }).then((response) => {
            if (response.data.success === false) {
                alert("error");
            } else {
                window.location.reload()
                dispatch(onAddServer(index, {
                    servername: this.state.servername,
                    jpname: this.state.jpname,
                    ipaddress: this.state.ipaddress,
                    port: this.state.port,
                    priority: this.state.priority
                }))
            }
        }).catch(() => {
        })
        this.setState({
            open: false
        })
    }

    handleServerNameChange(event) {
        this.setState({
            servername: event.target.value
        })
    }

    handleJPNameChange(event) {
        this.setState({
            jpname: event.target.value
        })
    }

    handleIPChange(event) {
        this.setState({
            ipaddress: event.target.value
        })
    }

    handlePORTChange(event) {
        this.setState({
            port: event.target.value
        })
    }

    handlePriorityChange(event) {
        this.setState({
            priority: event.target.value
        })
    }

    state = {
        open: false
    }
    show = (size, dimmer) => () => this.setState({
        size,
        dimmer,
        open: true
    })

    close = () => this.setState({
        open: false
    })

    render() {
        const {open, size, dimmer} = this.state
        return (
            <Grid>
            <MenuFix /> 
            <Container style = {{
                marginTop: '6em'
            }}>
                <Table unstackable>
                    <Table.Header>
                        <Table.Row>
                        <Table.HeaderCell colSpan='8'>
                            <Button basic color='violet' floated='right' icon labelPosition='left' primary size='tiny' onClick={this.show('small', 'blurring')}>
                                <Icon link color='violet' name='add' />Add
                            </Button>
                            <Modal size={size} dimmer={dimmer} open={open} onClose={this.close} closeIcon>
                            <Modal.Header>Add</Modal.Header>
                            <Modal.Content>
                                <Modal.Description>
                                    <Form>
                                <Form.Group width='equal'>
                                <Form.Field>
                                    <label>Server Name</label>
                                    <input value={this.state.servername} onChange={this.handleServerNameChange.bind(this)} />
                                </Form.Field>
                                <Form.Field>
                                    <label>JP Name</label>
                                    <input value={this.state.jpname} onChange={this.handleJPNameChange.bind(this)} />
                                </Form.Field>
                                </Form.Group>
                                <Form.Group width='equal'>
                                <Form.Field>
                                    <label>IP Address</label>
                                    <input value={this.state.ipaddress} onChange={this.handleIPChange.bind(this)} />
                                </Form.Field>
                                <Form.Field>
                                    <label>Priority</label>
                                    <input value={this.state.priority} onChange={this.handlePriorityChange.bind(this)} />
                                </Form.Field>
                                </Form.Group>
                                <Form.Group>
                                <Form.Field>
                                    <label>Port</label>
                                    <input value={this.state.port} onChange={this.handlePORTChange.bind(this)} />
                                </Form.Field>
                                </Form.Group>
                                </Form>
                                </Modal.Description>
                            </Modal.Content>
                            <Modal.Actions>
                                <Button color='black' onClick={this.close}>
                                    Nope
                                </Button>
                                <Button positive icon='checkmark' labelPosition='right' content="Submit" onClick={this.handleCreate.bind(this)} />
                            </Modal.Actions>
                            </Modal>
                        </Table.HeaderCell>
                        </Table.Row>
                        <Table.Row>
                            <Table.HeaderCell>State<Loader active inline size='small' /></Table.HeaderCell>
                            <Table.HeaderCell>Server Name</Table.HeaderCell>
                            <Table.HeaderCell>IP Address</Table.HeaderCell>
                            <Table.HeaderCell>Port</Table.HeaderCell>
                            <Table.HeaderCell>Updated</Table.HeaderCell>
                            <Table.HeaderCell>Priority</Table.HeaderCell>
                            <Table.HeaderCell>Edit</Table.HeaderCell>
                            <Table.HeaderCell>Delete</Table.HeaderCell>
                        </Table.Row>
                    </Table.Header>
                    <SegmentList posts_data = {this.props.servers} onDeleteServer={this.handleDeleteServer.bind(this)} />
                </Table>
            </Container>
            </Grid>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        servers: state.servers
    }
}

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

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(SegmentContainer)

//action types
const INIT_SERVERS = 'INIT_SERVERS'
const ADD_SERVER = 'ADD_SERVER'
const DELETE_SERVER = 'DELETE_SERVER'
const EDIT_SERVER = 'EDIT_SERVER'

//reducer

export default function(state, action) {
    if (!state) {
        state = {
            servers: []
        }
    }
    switch (action.type) {
    case INIT_SERVERS:
        return {
            servers: action.servers
        }
    case ADD_SERVER:
        return {
            servers: [...state.servers, action.server]
        }
    case EDIT_SERVER:
        return {
            servers: [...state.servers.slice(0, action.index), Object.assign({}, state.servers[action.index], {
                done: true
            }), ...state.servers.slice(action.index + 1)]
        /*servers: Object.assign([...state.servers], {
            [index]: action.data
        })*/
        //servers: Object.assign({}, state[action.index], action.data)
        }
    case DELETE_SERVER:
        return {
            servers: [
                ...state.servers.slice(0, action.index),
                ...state.servers.slice(action.index + 1)
            ]
        }
    default:
        return state
    }
}

// action creators
export const initServers = (servers) => {
    return {
        type: INIT_SERVERS,
        servers
    }
}

export const addServer = (server) => {
    return {
        type: ADD_SERVER,
        server
    }
}

export const deleteServer = (index) => {
    return {
        type: DELETE_SERVER,
        index
    }
}

export const editServer = (index, data) => {
    return {
        type: EDIT_SERVER,
        index,
        data
    }
}

import React, { Component, PropTypes } from 'react'
import ListContainer from '../containers/ListContainer'


export default class SegmentList extends Component {
    static propTypes = {
        posts_data: PropTypes.array,
        onDeleteServer: PropTypes.func,
    //onEditServer: PropTypes.func
    }
    static defaultProps = {
        posts_data: []
    }

    handleDeleteServer(index) {
        if (this.props.onDeleteServer) {
            this.props.onDeleteServer(index)
        }
    }

    /*handleEditServer(index) {
        if (this.props.onEditServer) {
            this.props.onEditServer(index)
        }
    }*/

    render() {
        return (
            <div>
                {this.props.posts_data.map((data, i) => <ListContainer
                post_data={data}
                key={i}
                index={i} onDeleteServer={this.handleDeleteServer.bind(this)} />
            )}
            </div>
        )
    }
}