Question

我正在使用React和Redux，但是当我将数据从容器传递到子组件时。道具正变成一个空物体。这是我的容器组件。

# Continuing from above ----
ui <- fluidPage(
  titlePanel("Dynamic Boxes"),
  fluidRow(
    prettyRadioButtons("check1", "Please Pick", c("Option 1" = "op1", "Option 2" = "op2"), selected=character(0), shape="square", outline = T, inline = T),
    uiOutput("check2"),
    uiOutput("select")
  )
)


server <- function(input, output) {

  output$check2 = renderUI({
    req(input$check1)
    if (input$check1=='op2') {
      prettyRadioButtons("check2", "Please Pick", 
                         c("Option 2.1" = "op3", "Option 2.2" = "op4", "Option 2.3" = "op5"), 
                         selected=character(0), shape="square", outline = T, inline = T)
    }
  })

  output$select = renderUI({
    req(input$check1) 
    if (input$check1 == 'op1') {
      selectInput('select_1', 'No.1 Select',choices = list1)
    } 
    else if (input$check1 == 'op2') {
      req(input$check2)
      if (input$check2 == 'op3') {
        selectInput('select_2', 'No.2 Select',choices = list2)
      } else if (input$check2== 'op4') {
        selectInput('select_3', 'No.3 Select',choices = list3)
      } else {
        selectInput('select_4', 'No.4 Select',choices = list4)
      }
    }
  })

}

shinyApp(ui, server)

但是当我尝试访问子组件中的数据时。它是空的物体。

class HeaderContainer extends React.Component {
    render() {
        return <Header searchByName = {this.props.searchByName} />
    }

}

const mapDispatchToProps = dispatch => {
    return bindActionCreators({
        searchByName: searchProviderByName.searchProviderByName
    }, dispatch)
}

export default connect(null, mapDispatchToProps)(HeaderContainer);

Answer 1

我从您的问题中获取了代码，可以证明它运行正常（请参见下面的代码段）。您要么弄乱了导入，要么未定义searchProviderByName.searchProviderByName，但Header仍然不会收到空的道具。

由于有问题的代码可以正常工作，因此无法指出您的代码出了什么问题，也许您可以提供一个代码段或沙箱来演示您遇到的问题。

const { Provider, connect } = ReactRedux;
const {
  createStore,
  applyMiddleware,
  compose,
  bindActionCreators,
} = Redux;

const initialState = {};
//action types
const SOME_ACTION = 'SOME_ACTION';
//action creators
const someAction = (...args) => ({
  type: SOME_ACTION,
  payload: args,
});
const reducer = (x) => x;
//creating store with redux dev tools
const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  reducer,
  initialState,
  composeEnhancers(
    applyMiddleware(() => (next) => (action) => {
      console.log('action:', action);
      return next(action);
    })
  )
);

function Header(props) {
  return (
    <button onClick={() => props.searchByName()}>
      click me
    </button>
  );
}
class HeaderContainer extends React.Component {
  render() {
    return (
      <Header searchByName={this.props.searchByName} />
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators(
    {
      searchByName: someAction,
    },
    dispatch
  );
};

const App = connect(
  null,
  mapDispatchToProps
)(HeaderContainer);

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>


<div id="root"></div>

无法访问传递给子组件的道具

1 个答案: