Почему mapStateToProps возвращает «неопределенное» в React / Redux

Question

Почему функция mapStateToProps возвращает "неопределенный" или пустой объект в React / Redux.

Мой код:

import React from 'react'
import {connect} from "react-redux";

export const ArticleComponent = ({props}) => (
<div>
    <h1>Hello {console.log(props)}</h1>
</div>
);

const mapStateToProps = (state) => {
  return {
    text: '11111'
  }
};

export default connect(mapStateToProps)(ArticleComponent);

Answer 1

Вы допустили несколько ошибок в своем коде:

---

• Вы экспортируете исходный компонент И делаете экспорт по умолчанию в подключенный компонент.

Удалите экспорт исходного компонента и импортируйте экспорт по умолчанию:

import ArticleComponent from "./ArticleComponent" // No curly braces{ } to import the default;

---

• Вы получаете доступ к props.props (который не определен), выполнив const ArticleComponent = ({props}) =>

Удалите фигурные скобки, чтобы получить доступ ко всем props, переданным этому компоненту: const ArticleComponent = (props) => (или используйте фигурные скобки, чтобы получить только {text} пропу)

---

• Вы регистрируете реквизиты в консоли (это не ошибка, но я не думаю, что это сделано намеренно)

Показывать состояние так: <h1>Hello {props.text}</h1>

---

Вот полный код:

import React from 'react'
import {connect} from "react-redux";

const ArticleComponent = ({text}) => ( // or (props)
<div>
    <h1>Hello {text}</h1> // or {props.text}
</div>
);

const mapStateToProps = (state) => {
  return {
    text: '11111'
  }
};

export default connect(mapStateToProps)(ArticleComponent);

Answer 2

Я не понял, почему вы хотите извлечь реквизит из реквизита.

Вместо

export const ArticleComponent = ({props})

запись

const ArticleComponent = (props)

Answer 3

вы не можете использовать const, как это, он никогда не будет работать. И почему вы возвращаете текстовое значение (это просто для проверки)?

import React, {Component} from 'react'
import {connect} from "react-redux";

class ArticleComponent extends Component {
render() {
const {text} = this.props
return (
<div>
    <h1>Hello {console.log(text)}</h1>
</div>
)
}
}


const mapStateToProps = (state) => {
  return {
    text: '11111'
  }
};

ArticleComponent = connect(mapStateToProps)(ArticleComponent);

export default  ArticleComponent;

Answer 4

Для правильного получения реквизита необходимо использовать подключенный экземпляр компонента. Импортируйте его как default import, поскольку подключенным компонентом является default export.

import ArticleComponent from 'path/to/ArticleComponent'