useEffect 在初始渲染后不触发

Question

我有一个包含 16 个对象的数组，我使用“number”属性来剪切不需要的元素。所以如果我想要一个包含 8 个元素的数组，我会输入：

<Images number="8"/>

但是我的 useEffect 在初始渲染后没有运行，但只有在我稍后对数组进行更改后，这个 returns 所有 16 个元素，如果我打错了，等待用于呈现和修复拼写错误的错误屏幕，我的浏览器显示了 8 个元素。这是我的其余代码：

const Images = (props) => {
    const [deck, setDeck] = useState(data);
    // data.length is equal 16

    const sliceDeck = () => {
        data.splice(parseInt(props.number, 10), data.length)
    }
    
    useEffect(()=>{
        sliceDeck()
        setDeck(data)
    }, [])

    return (
        <>
        <div className="img-container">
           {deck.map(object => <div className="img-on" key={object.id}><img src={object.src} alt=""/></div>)}
        </div>

        </>
    );
  }
  
  export default Images;

Answer 1

您需要将 props.number 添加到依赖项数组，以确保它在每次有更新时运行

const Images = (props) => {
    const [deck, setDeck] = useState(data);
    
    useEffect(()=>{
      if(!isNaN(props?.number)){
        const temp = data.splice(parseInt(props?.number, 10), data.length)
        setDeck(temp)
      }
    }, [props?.number])

    return (
        <>
          <div className="img-container">
            {deck.map(object => <div className="img-on" key={object.id}>
              <img src={object.src} alt=""/>
            </div>)}
          </div>
        </>
    );
  }
  
  export default Images;

强调文字

useEffect 在初始渲染后不触发

useEffect does not trigger after initial render

javascript

reactjs

react-hooks

use-effect

use-state