Контейнер Redux не знает, что это

Question

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

Если я изменю контейнер на компонент, тогда все будет работать правильно.

Этот компонент работает отлично и изменяет состояние при поступлении в магазин.

    class testCard extends Component {


       test= (event) => {
           console.log("!!!!!!!!!!!!!!"); // Shows
           this.props.testAction(); // This works
       }

       render(){
       return (
       <Card>
           <CardActionArea onClick={this.test}>
               ... // Card stuff
           </CardActionArea>
           <CardActions>
       </Card>)
       }
   }


   const mapStateToProps = (state) => {
       return {

      }
   }

   const mapDispatchToProps = (dispatch) => {
       return bindActionCreators(
       {
            testAction:   testAction()
        }, dispatch)
   }
   export default connect(mapStateToProps, mapDispatchToProps) (testCard);

Ниже код не знает, что это такое, и выдаст ошибку.

   const testCard = (props) => {

    let test= (event) => {
        console.log("!!!!!!!!!!!!!!"); // Shows
        this.props.testAction(); // This errors saying cannot find props of undefined
    }


    return (
    <Card>
        <CardActionArea onClick={test}>
            ... // Card stuff
        </CardActionArea>
        <CardActions>
    </Card>)
  }


  const mapStateToProps = (state) => {
     return {

     }
  }

  const mapDispatchToProps = (dispatch) => {
     return bindActionCreators({
         testAction:  testAction()
     }, dispatch)
   }
   export default connect(mapStateToProps, mapDispatchToProps) (testCard);

Answer 1

Пара заметок.

   class testCard extends React.Component {

    test = (event) => {
        console.log("!!!!!!!!!!!!!!");
        this.props.testAction()
    }

    render(){
    return (
    <Card>
        <CardActionArea onClick={test}>
            ... // Card stuff
        </CardActionArea>
        <CardActions>
    </Card>)
    }
   }

  const mapStateToProps = (state) => {
     return {

     }
  }

  const mapDispatchToProps = (dispatch) => {
     return bindActionCreators({
         testAction:  testAction()
     }, dispatch)
   }
   export default connect(mapStateToProps, mapDispatchToProps) (testCard);

Чтобы дать вам дальнейшее понимание того, почему «это» выдает ошибку.Это потому, что «это» всегда указывает на ближайший объект.Поскольку вы не использовали компонент класса (объект), он по умолчанию указывал на объект глобального окна , который не имеет свойства props .Вот почему вы получили ошибку "не могу найти реквизиты неопределенных".Вы можете обойти это с помощью компонента класса в сочетании с функциями стрелок.

Если вы хотите использовать реквизиты, передаваемые неклассному компоненту, вы просто используете:

props.nameOfValuePassedDown() вместо this.props.nameofValuePassedDown()

Answer 2

Короче говоря, вы должны вызвать props.testAction () во втором примере.Он использует функцию стрелки ES6.https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4

Также, когда вы используете функции стрелок для реагирующих компонентов, вам не нужен метод render () (рендеринг необходим, когда вы используете компонент на основе классов, то есть расширяет React.Component, тогда вам нужно реализовать его), все, что вам нужно в функции стрелки - это вернуть ваш результат, то есть данные jsx.

https://medium.com/@yassimortensen/container-vs-presentational-components-in-react-8eea956e1cea

Answer 3

Важно, чтобы вы знали, что такое реквизит. Большинство компонентов могут быть настроены при их создании с различными параметрами. Эти параметры создания называются реквизитами. С помощью реквизита мы можем отправлять и получать данные из компонента в компонент . Чтобы получить достаточное количество знаний, обратитесь к учебному пособию по игре в крестики-нолики.

Я надеюсь, что это будет вашей помощью.