gpt4 book ai didi

reactjs - 我的数组计数器落后了 1 步。我该如何解决这个问题?

转载 作者:行者123 更新时间:2023-12-03 14:11:38 24 4
gpt4 key购买 nike

用户单击数字 1-10,然后填充一个数组,然后将其显示为列表项。问题是数组总是从 0 开始,这是状态最初设置的值,然后数组在显示之前推送的数字时落后了一步。

enter image description here

App.js

import React, { useState } from 'react';
import Scoreboard from './Components/Scoreboard'
import Pins from './Components/Pins'
import './App.css';

function App() {

const [pinCount, setPinCount] = useState(0);
const [scoresArr, setScoresArr] = useState([]);

const addScore = (pins) => {
setPinCount(pins)
console.log(pinCount)
scoresArr.push(pinCount)
}

return (
<div className="App">
pinCount = {pinCount}
<Pins addScore={addScore}/>
<Scoreboard scoresArr={scoresArr}/>
</div>
);
}

export default App;

记分板.js

import React from 'react'

const Scoreboard = ({ scoresArr }) => {

let id = 0;

return (
<div>
<ul className='pagination'>
{scoresArr.map((score) => (
<li key={id++} className='page-link'>
{score}
</li>
))}
</ul>
</div>
)
}

export default Scoreboard

Pins.js

import React from 'react'

const Pins = ({ addScore }) => {

const pinsArr = [1,2,3,4,5,6,7,8,9,10];

return (
<div>
<ul className='pagination'>
{pinsArr.map((pins) => (
<li key={pins} className='page-item'>
<a onClick={() => addScore(pins)} className='page-link'>
{pins}
</a>
</li>
))}
</ul>

</div>
)
}

export default Pins

最佳答案

尽量避免强制改变状态。当您执行 scoresArr.push() 时,您将直接更改现有的状态值。这违反了 React 原则,并且可能会给您的代码带来视觉上的副作用,就像您的错误正在做的那样。

我们不用改变状态,而是使用您拥有的 setScoresArr 更新程序。我们将为 scoresArr 提供一个全新的数组,以便我们的更改按预期显示。

import React, { useState, useEffect } from "react";
import Scoreboard from "./Scoreboard";
import Pins from "./Pins";
import ReactDOM from "react-dom";

function App() {
const [pinCount, setPinCount] = useState(0);
const [scoresArr, setScoresArr] = useState([]);

const addScore = pins => {
setPinCount(pins);
setScoresArr([...scoresArr, pins]);
};

return (
<div className="App">
pinCount = {pinCount}
<Pins addScore={addScore} />
<Scoreboard scoresArr={scoresArr} />
</div>
);
}

export default App;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是一个工作示例:https://codesandbox.io/s/sharp-lake-e0e0n

关于reactjs - 我的数组计数器落后了 1 步。我该如何解决这个问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57238587/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com