javascript - 如何更改在 React 中动态创建的 div 中的值

Question

我有一些数据存储在组件状态 Prop 中名为 cards 的数组中。 当我从 API 获取数据时，我将结果放入该数组中，对于数组的每个元素，我使用相应元素的数据渲染 a 。该数据的属性之一称为数量，它始终从 1 开始。

问题是，在该 div 上，我想增加或减少每个单独元素的值，但我不知道如何操作。我知道的唯一方法是使用 this.setValue() 更改状态属性中的值，但这是在组件属性中，而不是数组的单个元素。

那么如何在不使用 setState() 的情况下更新动态生成的 div 的值？

这是我的div。当我点击按钮时什么也没有发生。控制台上也没有显示任何内容。

这是我的数组定义:

constructor(props) {
    super(props);
    this.state = {
        value: '',
        list: [],
        cards: [],//this will store the data from the API
    };
    this.handleChange = this.handleChange.bind(this);
}

这是将 GET 请求的结果插入到我的 cards 数组中的函数:

searchCard = () => {
    const response = axios.get("https://api.scryfall.com/cards/search?q=".concat(this.state.value)).then(result => {
        let cardsArray = [];            
        result.data.data.map((element) => {
            element.quantity = 1;
            cardsArray.push(element)
        });
        this.setState({ cards: cardsArray });
        console.log(this.state.cards);
    }).catch(error => console.log(error));
}

这是我自动生成的 div:

addCardToPool = (element) => {
    if (element.quantity <= 3) {
        element.quantity += 1;
    }

}
removeCardFromPool=(element) => {
    if (element.quantity >= 1) {
        element.quantity -= 1;
    }
}
<div className="card-thumbnail-container">                    
                {this.state.cards.length > 0 ? //if the cards array is not empty
                    this.state.cards.map((element, key) =>
                        <div className="card-thumbnail" key={key}>
                            <div className="card-image"><img src={element.image_uris.normal} /></div>
                            <div className="quantity buttons">
                                <button className="button is-small is-danger" onClick={this.addCardToPool(element)}>Rem.</button>
                                <div><button className="button is-success is-info">Add: {element.quantity}</button></div>
                                <button className="button is-small is-info" onClick={this.removeCardFromPool(element)}>Add.</button>
                            </div>
                        </div>
                    )
           :<div></div>}
    </div>

Answer 1

React 的一个经常被忽视的功能是您可以从其他组件构建组件，这个概念称为组合。

因此，在您的示例中，不要尝试在一个组件中完成所有操作，而是将其拆分为 2 个组件。可能称为 Cards 和 Card。

这样做的优点是 Card 将拥有自己的状态，因此维护更新变得微不足道。

下面是一个例子，它使用了 Hooks，但是如果你使用组件方法，同样的概念也适用。我还添加了一个假装的远程数据库获取，然后将显示一条请等待消息。

const {useState, useEffect} = React;

//pretend async get cards
function getCards() {
  return new Promise((r, x) => {
    setTimeout(() => {
      const cards = [
        {name:'one', qty: 1},
        {name:'two', qty: 1},
        {name:'three', qty: 1}
      ]
      r(cards);
    }, 500);
  });
}

function Card(props) {
  const [card, setCard] = useState(props.card);
  function btAdd(value) {
    return () => {
      const newQty = card.qty + value;
      if (newQty < 1 || newQty > 4) return;
      setCard({...card, qty: newQty});
    }
  }
  return <div>
    <button onClick={btAdd(-1)}>-</button>
    <div style={{margin: "0 10px", width: "70px", display: "inline-block"}}>
      {card.name} = {card.qty}</div>
    <button onClick={btAdd(+1)}>+</button>
  </div>;
}

function Cards() {
  const [cards, setCards] = useState([]);
  useEffect(() => {
    getCards().then(c => setCards(c));
  }, []);
  return cards.length
    ? cards.map((card, ix) => 
      <Card key={ix} card={card}/>)
    : <div>Loading please wait..</div>;
}


ReactDOM.render(<Cards/>, document.querySelector('#mount'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="mount"></div>