在组件内部使用setState禁用按钮不起作用

Question

在RecipeListItem组件内单击按钮并且函数handleFavorites凝视之后，我希望我的按钮被禁用 。

我的逻辑有什么问题？ 因为此代码不起作用...

子组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { addToFavorites } from '../../actions/';
import './style.css';

import Ingredients from '../../components/Ingredients';

class RecipeListItem extends Component {
  constructor() {
    super();
    this.state = {
      valueButton: false,
    };
  }

  thumbnailCheck(link) {
    if (link.length === 0) {
      // Thumbnail placeholder
      const newLink =
        'https://res.cloudinary.com/dfe57evk4/image/upload/v1506802313/no_thumb_hxdh5h.png';
      return newLink;
    }
    return link;
  }

  handleFavorites(fav) {
    this.setState({ valueButton: true });
    this.props.addToFavorites(fav);
  }

  render() {
    const { title, link, ingredients, thumbnail } = this.props;
    return (
      <li className="list-group-item">
        <img
          className="RecipeListItem-img"
          src={this.thumbnailCheck(thumbnail)}
          alt="thumbnail"
        />
        <a href={link} target="_blank">
          <span className="RecipeListItem-title">{title}</span>
        </a>
        <button
          disabled={this.state.valueButton}
          className="RecipeListItem-fav-button btn btn-secondary"
          onClick={() => this.handleFavorites([title, link])}
        >
          + Add to Fav
        </button>
        <br />
        <a href={link} target="_blank">
          <span className="RecipeListItem-full-link">Full recipe link</span>
        </a>
        <br />
        <span className="RecipeListItem-ingredients-header">Ingredients:</span>
        <Ingredients ingredients={ingredients} />
        <br />
      </li>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ addToFavorites }, dispatch);
}

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

父组件：

import React, { Component } from 'react';
import _ from 'lodash';

import RecipeListItem from '../../containers/RecipeListItem';

class RecipeList extends Component {
  render() {
    const recipesList = this.props.recipesReady.map(oneRecipe => {
      const key = _.uniqueId('recipe_');
      return (
        <RecipeListItem
          key={key}
          title={oneRecipe.recipe.label}
          link={oneRecipe.recipe.url}
          ingredients={oneRecipe.recipe.ingredients}
          thumbnail={oneRecipe.recipe.image}
        />
      );
    });
    return (
      <div className="container">
        <div className="row justify-content-xl-center">
          <ul className="col-xl-12">{recipesList}</ul>
        </div>
      </div>
    );
  }
}

export default RecipeList;

---

编辑：我在想...也许在单击该按钮后，此组件使用valueButton: false重新valueButton: false ，也许是原因？

- - 更多细节

因此该按钮看起来正常，可以单击。

只有当我手动更改时

  constructor() {
    super();
    this.state = {
      valueButton: true,
    };
  }

我有我想要的->禁用按钮，它不可单击，它是灰色的，鼠标指针不再是鼠标，它全都在bootstrap btn btn-secondary

因此该代码不会更改组件内部的状态，但仍然不知道为什么...

Answer 1

我想我知道这里发生了什么。 调度addToFavorites操作时，应用程序将运行重新渲染，并且您为每个RecipeListItem提供的key都应防止内部状态被重写。 但是，密钥生成错误。 本质上， 每次创建列表时都会创建一个新密钥。

React中的键应追溯到代表要渲染的元素的项。 在这里，代码在每次渲染元素时都会生成新的随机密钥，这基本上与完全不使用密钥相同。

我的建议：在获取/创建配方时， key={oneRecipe.recipe.key}创建键，然后将其放在配方对象上，然后在创建RecipeListItem元素时在地图调用中执行key={oneRecipe.recipe.key} 。 尽管在这里看起来您根本不需要创建唯一的密钥； url属性就足够了。

Answer 2

你必须绑定你handleFavorites(fav)使用this里面它

class RecipeListItem extends Component {
  constructor() {
    super();
    this.state = {
      valueButton: false,
    };
    this.handleFavorites = this.handleFavorites.bind(this);
  }

 // rest...