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

Question

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

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

Answer 1

尽量避免强制改变状态。当您执行 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