如何从 react.js 中的 redux 存储向引导表插入数据？答案

【问题标题】：how to insert data to bootstrap table from redux store in react.js?如何从 react.js 中的 redux 存储向引导表插入数据？
【发布时间】：2021-05-06 13:41:32
【问题描述】：

我在 redux 存储中有数据（数组）。我已经为它创建了动作和减速器，但是如何将已经存储在 redux 存储中的数据显示到我的引导表？

我的具有表格的功能组件：

const Contacts = function () {

 
    return (
        <div>
        <table class="table table-dark">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          </tbody>
      </table>
        </div>
    )
}

我的 redux 商店：

从“redux”导入 {createStore} 导入 {composeWithDevTools} 从 'redux-devtools-extension'

常量初始状态 = {

contacts:[

    {
        "id": 1,
        "name": "Leanne Graham",
        "username": "Bret",
        "email": "Sincere@april.biz",
        "address": {
          "street": "Kulas Light",
          "suite": "Apt. 556",
          "city": "Gwenborough",
          "zipcode": "92998-3874",
          "geo": {
            "lat": "-37.3159",
            "lng": "81.1496"
          }
        },
        "phone": "1-770-736-8031 x56442",
        "website": "hildegard.org",
        "company": {
          "name": "Romaguera-Crona",
          "catchPhrase": "Multi-layered client-server neural-net",
          "bs": "harness real-time e-markets"
        }
      },
      {
        "id": 2,
        "name": "Ervin Howell",
        "username": "Antonette",
        "email": "Shanna@melissa.tv",
        "address": {
          "street": "Victor Plains",
          "suite": "Suite 879",
          "city": "Wisokyburgh",
          "zipcode": "90566-7771",
          "geo": {
            "lat": "-43.9509",
            "lng": "-34.4618"
          }
        },
        "phone": "010-692-6593 x09125",
        "website": "anastasia.net",
        "company": {
          "name": "Deckow-Crist",
          "catchPhrase": "Proactive didactic contingency",
          "bs": "synergize scalable supply-chains"
        }
      },
      {
        "id": 3,
        "name": "Clementine Bauch",
        "username": "Samantha",
        "email": "Nathan@yesenia.net",
        "address": {
          "street": "Douglas Extension",
          "suite": "Suite 847",
          "city": "McKenziehaven",
          "zipcode": "59590-4157",
          "geo": {
            "lat": "-68.6102",
            "lng": "-47.0653"
          }
        },
        "phone": "1-463-123-4447",
        "website": "ramiro.info",
        "company": {
          "name": "Romaguera-Jacobson",
          "catchPhrase": "Face to face bifurcated interface",
          "bs": "e-enable strategic applications"
        }
      },
      {
        "id": 4,
        "name": "Patricia Lebsack",
        "username": "Karianne",
        "email": "Julianne.OConner@kory.org",
        "address": {
          "street": "Hoeger Mall",
          "suite": "Apt. 692",
          "city": "South Elvis",
          "zipcode": "53919-4257",
          "geo": {
            "lat": "29.4572",
            "lng": "-164.2990"
          }
        },
        "phone": "493-170-9623 x156",
        "website": "kale.biz",
        "company": {
          "name": "Robel-Corkery",
          "catchPhrase": "Multi-tiered zero tolerance productivity",
          "bs": "transition cutting-edge web services"
        }
      }


] }


       const contactReducer =(state=initialState,action)=> {
       switch(action.type){

      default:
return state;

       }

       }

     const store=createStore(contactReducer,composeWithDevTools())

      export default store;

【问题讨论】：

用 jsx 循环你的数据

标签： javascript reactjs redux react-redux react-bootstrap

【解决方案1】：

您可以使用react-redux 并获取状态。您可以查看示例here

import { useSelector } from 'react-redux'


const Contacts = function () {
     //choose your reducer from store
     const data = useSelector(state => state.yourReducerName)

     //data for use
     <tbody>
         {data.map(contact => (
            <tr>
             <th scope="row">{contact.id}</th>
             <td>{contact.name}</td>
             <td>{contact.username}</td>
             <td>{contact.email}</td>
            </tr>
         ))}
       </tbody>
}

【讨论】：

然后我如何将该数据插入行和列？
@TipsandTricksOfChess 我已经更新了答案。诀窍是你需要在useSelector 函数中选择你自己的reducer。然后可以使用map函数循环遍历数组

【解决方案2】：

如果你在 redux 存储中有数据，你可以这样使用：

    import { connect } from 'react-redux';

    const Contacts = function ({contacts}) {

 
    return (
        <div>
        <table class="table table-dark">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
         {contacts.map(element => (
          <tr>
            <th scope="row">{element.id}</th>
            <td>{element.name}</td>
            <td>{element.username}</td>
            <td>{element.email}</td>
          </tr>
         ))}
       </tbody>
    
      </table>
        </div>
    )
   }

   function mapStateToProps(state) {
     return {
       contacts: state.contacts //get store data 
    };
  }

  export default connect(mapStateToProps, null)(AccountMenu)

【讨论】：

tsecheukfung01 说要使用钩子......钩子允许您订阅 Redux 存储和调度操作，而无需将组件包装在 connect() 中。