Question

我正在学习redux，我试图在initialstate中显示我的table数据，并且添加的数据也应该显示在表格中。

这是我的postReducer.js文件：

const initialState = [{name: 'jhon', age: '23', email: 'a@a'}, {name: 'doe', age: '24', email: 'b@a'}];

const postReducer = (state = initialState, action) => {
    switch(action.type) {
      case 'ADD_POST':
        return state.concat([action.data]);
      default:
        return state;
    }
  }
  export default postReducer;

这是我的table.js文件：

import React, {Fragment} from "react"


class Table extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            employees: this.props.state
        };

    }


    render() {
        return (
            <Fragment>
                <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Age</th>
                        <th scope="col">Email</th>
                    </tr>
                </thead>
                <tbody>
                {this.props.employees.map((item, index) => (
                    <tr key={index}>
                        <td>{item.name}</td>
                        <td>{item.age}</td>
                        <td>{item.email}</td>
                    </tr>
                ))}
                </tbody>
            </Fragment>
        );
    }
}

export default Table;

我试图在表initialState中显示reducer的数据，但我没有这样做。

我也试图在同一张表中显示添加表单数据

这是我的form.js文件

import React, { Fragment } from "react"

class Form extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: '', age: '', email: ''};
    }



    render() {
        return (
            <form>
                <div className="form-group">
                    <input name="name" type="text" />
                </div>

                <div className="form-group">
                    <input name="age" type="number"/>
                </div>

                <div className="form-group">
                    <input  name="email" type="text"/>
                </div>

                <button onClick={ (data) => this.props.dispatch({type: 'ADD_POST', data})} type="button">SAVE</button>

            </form>
        );
    }
}

export default Form;

这是我的App.js文件：

import React from "react"
import Table from "./table"
import Form from "./form"

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }


    render() {
        return (
            <React.Fragment>              
              <Form/>
            <hr/>
            <table>
                <Table />
            </table>
            </React.Fragment>
        );
    }
}
export default App;

这是index.js文件

import React from "react";
import ReactDOM from "react-dom";

import App from "./components/App";

import { Provider } from 'react-redux'

import { createStore } from 'redux'
import rootReducer from '../src/redux/reducers/rootReducer'

const store = createStore(rootReducer)


ReactDOM.render((
  <Provider store={store}>
      <App />
  </Provider>
), document.getElementById('app'))

任何人都可以帮助我在表格中显示初始状态数据，并且表单数据也应该存储在减速器状态中并且也应该在表格中显示吗？

谢谢

Answer 1

要将组件连接到redux存储，您至少需要使用connect和一个mapStateToProps函数。此代码假定您将减速器注册为“员工”。请注意，您没有，应该将redux映射的prop复制到组件的状态：

import React, {Fragment} from "react";
import { connect } from "react-redux";

class Table extends React.Component {
    render() {
        return (
            <Fragment>
                <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Age</th>
                        <th scope="col">Email</th>
                    </tr>
                </thead>
                <tbody>
                {this.props.employees.map((item, index) => (
                    <tr key={index}>
                        <td>{item.name}</td>
                        <td>{item.age}</td>
                        <td>{item.email}</td>
                    </tr>
                ))}
                </tbody>
            </Fragment>
        );
    }
}

const mapStateToProps = (state) => ({ employees: state.employees });

export default connect(mapStateToProps)(Table);

此外，要使用this.props.dispatch，还需要connect Form组件：

import React, { Fragment } from "react"
import { connect } from "react-redux";

class Form extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: '', age: '', email: ''};
    }

    render() {
        return (
            <form>
                <div className="form-group">
                    <input name="name" type="text" />
                </div>

                <div className="form-group">
                    <input name="age" type="number"/>
                </div>

                <div className="form-group">
                    <input  name="email" type="text"/>
                </div>

                <button onClick={ (data) => this.props.dispatch({type: 'ADD_POST', data})} type="button">SAVE</button>

            </form>
        );
    }
}

export default connect(null)(Form);

您可以通过利用mapDispatchToProps()来简单/增强分派，该优势将作为connect()的参数传入。

请先查看Usage with react和redux tutorial，因为您似乎缺少基于代码和问题的Redux关键概念。

希望有帮助！

表中显示的Redux存储数据问题

1 个答案: