如何刷新反应渲染答案

【问题标题】：how to refresh react render如何刷新反应渲染
【发布时间】：2019-04-11 12:32:51
【问题描述】：

每次点击后修改setState时如何更新reactjs jsx。在 console.log 中它显示了最新的数组，但在视图中它不会被改变。

https://codeshare.io/5DNELl

【问题讨论】：

请在此处发布您的代码，而不是在外部链接后面。
我认为这个问题已经在这里得到了回答：stackoverflow.com/a/26408784/6138595
为什么不把react官方介绍写完呢？你不应该在它之后有这样的问题。
请阅读minimal reproducible example和How to Ask，这个问题对任何人都没有用。
@frontend 我知道您接受了我的回答，但我为您想出了一个更好的解决方案 - 看看吧。如果您出于某种原因需要newArray，请在您的问题中说明这一点。

标签： javascript reactjs

【解决方案1】：

̶L̶o̶o̶k̶s̶̶l̶i̶k̶e̶̶y̶o̶u̶r̶̶n̶e̶w̶A̶r̶r̶a̶y̶̶̶i̶s̶̶d̶e̶p̶e̶n̶d̶e̶n̶t̶̶o̶n̶̶y̶o̶u̶r̶̶̶c̶a̶r̶d̶A̶r̶r̶a̶y̶̶.

可以使用̶̶s̶e̶t̶S̶t̶a̶t̶e̶的̶c̶a̶l̶l̶b̶a̶c̶k̶更新状态基于你最新̶̶c̶a̶r̶d̶A̶r̶r̶a̶y̶ P>

编辑：我再次查看您的代码，发现您在渲染中没有使用newArray 做任何事情。您可以简单地对您复制的 cardArray... 进行排序，这在渲染中...

这是一个工作示例：

class Game extends React.Component {
    constructor(props) {
    super(props);

        this.state = {
            memoryCards: ['mario', 'luigi', 'browser', 'peach', 'wario', 'toad', 'yoshi', 'bowser-junior', 'waluigi', 'diddy-kong-jr' ],
            cardArray: [],
            count: 0
        }
    }

        shuffleCard() {
            this.setState({
                cardArray: [...this.state.memoryCards, ...this.state.memoryCards].sort(() => 0.5 - Math.random())
            })
        }

        checkCard(cardName, index) {
            const item = [{
                name: cardName,
                indexNumber: index,
                flipped: true
            }];

            console.log(item);
        }

        render() {
            return (
                <div>
                    <button onClick={() => this.shuffleCard()}>Click</button>
                    {this.state.cardArray.map((items, index) => (
                        <li className="card" key={index} onClick={() => this.checkCard(items, index)}>{items}</li>
                    ))}
                </div>
            )
    }
}

ReactDOM.render((<Game/>), document.getElementById('testing'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="testing"></div>

【讨论】：

【解决方案2】：

我相信你需要写：

    render() {
        return (
            <div>
                <button onClick={() => this.shuffleCard()}>Click</button>
                {this.state.cardArray.map((items, index) => (
                    return (<li className="card" key={index} onClick={() => this.checkCard(items, index)}>{items}</li>)
                ))}
            </div>
        )
}

【讨论】：

【解决方案3】：

看来您实际上并没有更新任何东西。你会的

cardArray: [...memoryCards, ...memoryCards]

它只是以相同的方式重写数组。您在这里的目标是什么？

【讨论】：

【解决方案4】：

通过复制和排序 memoryCards 然后 setState 来更新 cardArray。

shuffleCard() {
        let cardArray = [...this.state.memoryCards, ...this.state.memoryCards].sort(() => 
            0.5 - Math.random());
        this.setState({cardArray});
        console.log(cardArray);
 }

【讨论】：

【解决方案5】：

您从this.state.cardArray 渲染卡片，因此您应该在shuffleCard 函数中更新this.state.cardArray：

shuffleCard() {
  this.setState({
    ...this.state,
    cardArray: [...this.state.memoryCards, ...this.state.memoryCards].sort(() => 0.5 - Math.random())
  });
}

【讨论】：