Невозможно получить доступ к реквизитам, переданным дочернему компоненту - PullRequest
Новая
       4

Невозможно получить доступ к реквизитам, переданным дочернему компоненту

1 голос
/ 20 июня 2020

Я использую React и Redux, но когда я передаю данные из контейнера дочерним компонентам. Реквизит становится пустым объектом. Это мой компонент-контейнер. 

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);

Но когда я пытаюсь получить доступ к данным в дочернем компоненте. Он идет как пустой объект. 

export default function Header(props) {
 const performSearch = () => {
        props.searchByName(name,location); // getting undefined, props is empty object
 }
}

1 Ответ

1 голос
/ 20 июня 2020

Я взял код из вашего вопроса и могу показать, что он работает нормально (см. Фрагмент ниже). Либо вы испортили импорт, либо searchProviderByName.searchProviderByName не определено, но тогда заголовок все равно не получит пустые реквизиты.

Невозможно указать, что не так с вашим кодом, потому что указанный код работает, возможно, вы можете предоставьте фрагмент кода или песочницу, демонстрирующую вашу проблему. 

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>
...