我如何使用带有 redux 和 react.js 的按钮将数据从一个组件传递到另一个组件？

Question

i am working on a Billing list project..... and whenever the user clicks on a button in the Item Page, the button should send one random item with the Fetched API to the second page which is the Billing page and it should match and display the information!

After fetching the data with Axios i managed to save it to the Redux store.... I tried to use props to send the data or display it but nothing works, it returns an error saying TypeError: Cannot read property 'props' of undefined ....? What am i doing wrong ?

I Would really appreciate some feedback or any suggestions that would help me. Thanks!

Here is my code for the Item page :

    import React, { useEffect , useState} from 'react'
import { connect } from 'react-redux'
import { getItems } from '../store/actions/itemsActions';
import {  Link } from "react-router-dom";




function Items ({ getItems, items }) {

  useEffect(() => {
    getItems()
  }, [])

  


  function getRandomElt(arrayLenght) {
    return  items.sort(() => Math.random() - Math.random()).find(() => true);
  }




  function handleClick(){

    items &&
    items.items &&
     items.items.map(item => {
      <React.Fragment key={item.id}>
        <h4>{item.title}</h4>
      </React.Fragment>
    })

    
  }



return (
  
    

    <div>

      <div className="image" style={{ display: "flex",
          justifyContent: "center",
          alignItems: "center",}}>
        <img
        src="http://i.stack.imgur.com/yZlqh.png"
        alt=""
      />
        </div>
       
      


        <div className="button" style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}>
         
          <div className="item-preview" >
            {
              items &&
              items.items &&
              items.items.map((item) => (
                <div key={item.id}>
                  <h2>{item.title}</h2>
                  <h2>{item.price}</h2>
                </div>

              ))
            } 
              {/* /${items.id} */}
          <Link onClick={handleClick}  to={`/bills`}
          ><button className="btn btn-primary">Analyse Receipt</button>
      
          </Link>

          </div>
     
        </div>
        
        
    </div>
  )
}

const mapStateToProps = state => {
  return {
    items: state.items
  }
}

const mapDispatchToProps = dispatch => {
  return {
    getItems: () => dispatch(getItems())
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Items)

Here is my Billing page Code :

import React, { useState } from 'react';
import './Bill.css'
import { Link, useParams } from 'react-router-dom';
import { connect } from 'react-redux'
import { getItems } from '../store/actions/itemsActions';

function BillList ({ getItems ,items}){

  const [counter, setCounter] = useState(1)
  const incrementCounter = () => setCounter(counter + 1);
  let decrementCounter = () => setCounter(counter - 1);
  if(counter<=0) {
    decrementCounter = () => setCounter(1);
  }

  const { id } = useParams();
  let Total = 0


  // increase the item number 
  function ButtonIncrement(props) {
  
    return (
      <button style={{ marginLeft: '.1rem', textAlign: 'left'}} onClick={props.onClickFunc}>
      +
      </button>
    )
 }

//  will decrement the item number  

 function ButtonDecrement(props) {
  
  return (
    <button style={{ marginLeft: '.1rem',textAlign: 'left'}} onClick={props.onClickFunc}>
    -
    </button>
  )
}

// will display the current number 

function Display(props) {
  return (
    <label style={{ marginLeft: '.5rem'}} >{props.message}</label>
  )
}


 

    return(

      <div className='bills'>
       <h1>Product id: {id}</h1>

          <div className='title' style={{textAlign:'center', 
          justifyContent: "center",
          alignItems: "center",
          fontSize: 14,
        }}>
          <h1>Bakery</h1>
          <h1>Company Gbr</h1>
          <h1>Oranienburger Straße 120</h1>
          <h1>10119 Berlin</h1>
          </div>
          

          <div className="bills-container">
          <div>
      </div>
     
            {/* pass in the details  */}
            <div className="bill-number">
            {items &&
            items.items &&
             items.items.map(item => 
            <React.Fragment key={item.id}>
              <div className="bill-number">
              <h3 > <strong>Bill: </strong>{item.billNumber}</h3>
              </div>
               <div style={{flex: 1,textAlign: 'right'}} className="time-date">
               <h3> <strong>Time: </strong>{item.created_datetime}</h3>
               </div>
                ----------------------------------
                ----------------------------------
                ---------------------------------- 
                -------------------- 
               
                <div>
                <h3 > <Display message={counter}/>x <strong>Title: </strong>{item.title}</h3>
                <ButtonIncrement style={{flex: 1,textAlign: 'left'}} className="increase" onClickFunc={incrementCounter}/>
                <ButtonDecrement style={{flex: 1,textAlign: 'left'}} className="decrease" onClickFunc={decrementCounter}/>
                
             
                </div>
                <div style={{textAlign: 'right'}} >
                <h3> <strong>Price: </strong> {item.price}</h3>     
                </div>
                <div>
               <span>Total: </span>     
                </div>
     
                </React.Fragment>
        )}

            </div>
         
          </div>
          <div lassName="button"
          style={{textAlign:"center"}}>
            <Link to={{
            pathname:'/',
          }}>
            <button>
            Analyse Receipt
            </button>

          </Link>
      

          </div>

          

    </div>
    )
  }


const mapStateToProps = state => {
  return {
    items: state.items
  }
}

const mapDispatchToProps = dispatch => {
  return {
    getItems: () => dispatch(getItems())
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(BillList)

Action:

    import { GET_ITEMS, ITEMS_ERROR  } from "../types";
    import axios from 'axios'
    
    
    export const getItems = () => async (dispatch) => {
    
        try{
            const res = await axios.get('http://localhost:8000/api/bills/')
            dispatch({
                type: GET_ITEMS,
                payload: res.data
            })
            
        }
        catch(e){
            dispatch({
                type: ITEMS_ERROR,
                payload: console.log(e),
            })
           
        }
        
    
    
    }


**App.js:**


    function App({items}) {
    
      function ItemPost() {
        let { id } = useParams();
        return <div style={{ fontSize: "50px" }}>
                 Now showing post {id}
               </div>;
      }
    
      
      return (
        <Router>
        <div className="app">
            <main>
              <Switch>
                <Route exact path="/" component={Items}>
        
                </Route>
    
                <Route exact path="/bills/" component={BillList}>
                  <BillList items={items}/>
                   </Route>
    
                   <Route exact path="/bills/:id" component={BillList}>
                  <ItemPost/>
                   </Route>
    
                
    
    
              </Switch>
    
            </main>
          
       
        </div>
        </Router>
      );
    }

Action:

export const getItems = () => async (dispatch) => {


    try{
        const res = await axios.get(`http://localhost:8000/api/bills/`)
        dispatch({
            type: GET_ITEMS,
            payload: res.data
        })
        
    }

Answer 1

You could use a state management tool like Redux for example.

After fetching the data with Axios save it to the Redux store. Doing that makes the data available to be used by another components.