Next JS 在状态改变时不会重新渲染元素

Question

我有一个代码，我可以在其中获取图像名称

const [foundImg, setFoundImg] = useState(false)
var imgNames = []
---
axios.get('http://someapi.com')
.then(res => {
  imgNames.push(res.data)
  setFoundImg(true)
}.catch(err => console.log(err)

我把这个条件放在返回/渲染中

         { (foundImg === true) 
            ? itemImg.map( i => {
              return <div className="product--box">
                <Image width={50} height={50} src='/public/dummy.png' className='img'/>
              </div>
            })
            : null
          }

但问题是，当获取图像名称时，组件不会重新渲染。所以现在还是空的。我怎样才能在获取返回数据时渲染该图像？

Answer 1

您将imgNames存储为局部变量，并且因为它不是 React 组件的状态，所以如果您更改imgNames，React 将不会识别您需要更新组件。

解决方案：

改变var imgNames = []成为const [imgNames, setImgNames] = useState([])

然后更改imgNames.push(res.data)为setImgNames(res.data)

状态改变后，React会为你重新渲染组件