时间戳

首页 > 解决方案 > 无法在 React/Redux 中的组件之间传递数据

reactjs - 无法在 React/Redux 中的组件之间传递数据

问题描述

我是 React 的新手，正在尝试构建一个应用程序，将足球运动员分成两支球队，并且在将数据从一个组件传递到另一个组件时遇到困难。我安装了 redux 和 react-redux。

我的问题是，一旦输入了 10 个名称（我正在调用numbersReached），提交 addPlayers 表单的按钮应该被禁用，因此无法提交更多玩家。

我尝试将状态值 numbersReached 传递到我的 AddPlayers 组件中，但它没有被正确导入 - 它在 console.log 中显示为undefined.

到目前为止我的代码：

'initialState.js'

export const initialState = {
  playersList: [],
  shuffledList: [],
  teamA: [],
  teamB: [],
  numbersReached: false
};

export default initialState;

'src\components\NumbersReached\index.js'：

import { connect } from "react-redux";
import NumbersReached from "./NumbersReached";

const mapStateToProps = (state) => {
  return {
    ...state,
    numbersReached: state.playersList.length >= 10 // Once state.playersList.length>=10 numbersReached should = true. (10 is for five-a-side)
  };
};

export default connect(mapStateToProps)(NumbersReached);

src\components\NumbersReached\NumbersReached.js：

import React from "react";

const NumbersReached = ({ numbersReached }) => (
  <div>
    {numbersReached ? "Numbers Reached" : null}
  </div>
);

export default NumbersReached;

'src\components\AddPlayer\index.js'：

import { connect } from "react-redux";
import AddPlayer from "./AddPlayer";
import { addPlayer } from "../../data/actions";

const mapStateToProps = (state) => {
  return {
    playerName: state.playerName,
    numbersReached: state.numbersReached
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    handleSubmit: (data) => dispatch(addPlayer(data)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(AddPlayer);

'src\components\AddPlayer\AddPlayer.js'

import React, { Component } from 'react';

class AddPlayer extends Component {

  constructor(props) {
    super(props);

    this.state = {
      playerName: props.playerName,
      numbersReached: props.numbersReached
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

  };

  handleChange(e) {
    this.setState({ playerName: e.currentTarget.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    this.props.handleSubmit({ ...this.state });
  }


  render() {

    return (
      <React.Fragment>
        <form className="entry-form" onSubmit={this.handleSubmit}>
          <input
            placeholder="Enter a player's name"
            className="player-input"
            type="text"
            onChange={this.handleChange}
          />
          <button
            type="submit"
            className="player-submit"
            disabled={this.state.numbersReached}  // Does not disable the button as this.state.numbersReached is undefined
          >
            Add a player
          </button>
        </form>

      </React.Fragment>
    )

  }
};

export default AddPlayer;

非常感谢您的帮助！

标签： reactjsreduxreact-redux

解决方案

你在 state 中复制 redux AddPlayerstate。重复状态是不好的做法，应该避免。其次，它们是不同的状态，redux'state 和 react 组件的 state。因为它this.state.numbersReached在安装时收到第一个值，但之后不会更新。

你所在的州也很奇怪playerName: props.playerName。首先，你的 redux 中没有一个名为playerName. 其次，最重要的是，它是创建玩家并添加到您的playersList. 您最好将该状态初始化为空字符串。

顺便说一句，我重构了一些组件以减少代码。如果您将函数声明为箭头函数，则不需要在构造函数中绑定它们。并且您不再需要在构造函数中声明您的状态。但是，如果您想保持原件以保持一致性，或者个人喜好继续，那也可以:)。

毕竟，您的组件看起来像：

import React, { Component } from 'react';

class AddPlayer extends Component {

  state = {
    playerName: ''
  };


  handleChange = (e) => {
    this.setState({ playerName: e.currentTarget.value });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.handleSubmit({ ...this.state });
  }


  render() {

    return (
      <React.Fragment>
        <form className="entry-form" onSubmit={this.handleSubmit}>
          <input
            placeholder="Enter a player's name"
            className="player-input"
            type="text"
            onChange={this.handleChange}
          />
          <button
            type="submit"
            className="player-submit"
            disabled={this.props.numbersReached}
          >
            Add a player
          </button>
        </form>

      </React.Fragment>
    )

  }
};

export default AddPlayer;

最后一点，您有 numbersReached 状态，但是在您的 mapStateToProps 中，您是基于自定义函数设置的，而不是您的 numbersReached 状态。

如果你想在你的 redux 状态上保持 numbersReached 状态，你应该state.playersList.length >= 10在你的 reducer 处处理该逻辑以便在那里正确更新，而不是在你的 mapStateToProps 处。尽管您可以完全从您的 redux 状态中删除，numbersReached因为它是从您所在州的其他部分派生的。

推荐阅读