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

Question

我有一些数据存储在我的组件状态道具中名为cards的数组中。 当我从 API 获取数据时，我将结果放在这个数组中，并且对于数组的每个元素，我使用相应元素的数据呈现 a。 此数据的属性之一称为始终从 1 开始的quantity 。

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

那么如何在不使用 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>