如何将响应中的数据作为道具传递给组件？

Question

我试图从 API 获得对商店的响应，以使其可供任何组件使用。 在这种情况下，我希望能够将响应中的所有主体用作可以传递给组件以呈现其值的道具

关于我应该怎么做才能从响应中获取数据并呈现它的任何想法？ 也许我缺少一个 redux 步骤？

---

减速器

export default (state=[], action) => {
  switch (action.type) {
      case 'FETCH_CV' :
          return [...state, action.paylaod];
        default:
            return state;
        }

---

动作创建者

import DiagnoseMl from '../Components/API/DiagnoseMl';

export const fetchCv= (formData) => async dispatch => {

    
       const response = await DiagnoseMl.post('/d', formData);
      
        dispatch({type: 'FETCH_CV', payload: response.data});


  };

---

反应组件

import React from "react";
import styled from "styled-components";
import {connect} from 'react-redux';
import {fetchCv} from '../Actions';
import Example from '../Components/ReactToPrint'


class DataList extends React.Component{

    state = {
 
        // Initially, no file is selected
        selectedFile: null

      };
      
      // On file select (from the pop up)
      onFileChange = event => {
      
        // Update the state
        this.setState({ selectedFile: event.target.files[0] });

       };
      
      // On file upload (click the upload button)

      onFileUpload = () =>{
      
        // Create an object of formData
        const formData = new FormData();
      
        // Update the formData object
        formData.append(
          "file",
          this.state.selectedFile
        );
      
        // Details of the uploaded file
        console.log(this.state.selectedFile);
      
        this.props.fetchCv(formData);
      
      };

      
 render(){
    return (
        <Container>  
        <Uploader>
          <input  id="uploadBtn" accept="application/pdf, application/vnd.openxmlformats-officedocument.wordprocessingml.document" type="file" onChange={this.onFileChange} />
          <button onClick={this.onFileUpload}>
          Cargar Archivo
          </button>
         </Uploader>
        ***<Example/>*** //i want to use the reponse in this component
      </Container>
)

 }

}

// our state object will have a prop called data, that contains all of the data return from the reducer

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

};

export default connect(mapStateToProps,{fetchCv})(DataList);

---

店铺设置

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk';
import reducers from './Reducers';


import App from './App';


const store = createStore(reducers, applyMiddleware(thunk));


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

提前致谢！

Answer 1

编写一个 function，称为选择器，它将商店的 state 作为参数，并从 state 树中返回您想要使用的特定值。 然后导入并调用 redux 的 useSelector function 来包装对该选择器的调用以获得最新的值。 然后，您可以在组件的 jsx 中打印该值，或将其传递给它适合的任何较低组件。

旁注：我建议在您的操作方法中使用它，而不是将您的响应正文转储到有效负载中，您更明确地 map 您期望从响应中获得的属性。 在您的减速器中，还显式地解构期望值。 它将使您的代码更易于遵循。

选择器文件：

const mySelector = (state) => {
   // Calculate the value you want from state and return it here.
}

在您的组件文件中：

Import { useSelector } from 'redux';
import mySelector from 'path-to-mySelector';

...
//Inside the component definition:
const someExpectedValueFromStore = useSelector (mySelector);