在React中当prop改变时更新UI组件

Question

我正在尝试使用React制作摩托车社交媒体。

当用户搜索摩托车型号时，它将显示所有规格，以及拥有摩托车的人，以便用户可以联系到他们。

所以，我试图将所有所有者列表从页面传递到OwnersList。jsx作为道具，以便当所有者数组准备好(从MongoDB获取后)，OwnersList. js . js . js . js . js . js . js . js . js . js . js . js . js . js . js . js . js . js . jsJSX可以显示列表上的人。

我希望它显示"LOADING…"当道具数组为空时，只要道具数组准备好了，我想让它重新渲染组件。

然而，即使在数组到达后，页面仍然显示"LOADING.."它不会改变。

我在这里做错了什么?

此外，如果我能知道我错过了什么样的React基本概念，就会被困在这种bug中，那就太好了。

OwnersList.jsx

import React from "react";
import { useEffect, useState } from "react";
export default function OwnersList({ ownerObjectsArray }) {
useEffect(() => {
console.log(
"ownerObjectsArray.length is like this ",
ownerObjectsArray.length
);
}, [ownerObjectsArray]);
if (ownerObjectsArray.length === 0) {
console.log("yes, the array is empty. PLEASE WAIT");
return <h2>Loading...</h2>;
} else {
console.log("ownerObjectsArray is not empty, so , i will set it as state.");
return (
<div>
{ownerObjectsArray.map((ownerObject) => {
return (
<div key={ownerObject.username}>
<h3>{ownerObject.username}</h3>
<button>contact</button>
</div>
);
})}
OwnersList
</div>
);
}
}

Answer 1

使用三元运算符(condition ? result : else)在一个return语句中有条件地呈现JSX

道具改变将触发重新渲染，因此它将再次评估ownerObjectsArray.length，并确定渲染哪个JSX。

不需要比这更多的代码:

import React from 'react'
export default function OwnersList({ ownerObjectsArray }) {
return ownerObjectsArray.length ? (
<div>
{ownerObjectsArray.map((ownerObject) => (
<div key={ownerObject.username}>
<h3>{ownerObject.username}</h3>
<button>contact</button>
</div>
))}
OwnersList
</div>
) : (
<h2>Loading...</h2>
)
}

有一个"道具改变"的问题。如果对数组的引用没有改变，则不会触发重新渲染。所以如果你只是在父组件中更新相同的引用，子组件并不知道数组已经改变了。

,

const ownerObjectsArray = []
// do some stuff
ownerObjectsArray.push(newObject)

对变量的引用没有改变，只是在内存中的同一位置又增加了一次。

但是，要创建对数组的新引用，请执行如下操作:

let ownerObjectsArray = []
// do some stuff
ownerObjectsArray = [...ownerObjectsArray, newObject]

最好的方法是使用useState控制数组并将状态传递给组件:

[ownerObjectsArray, setOwnerObjectsArray] = useState([])
// do some stuff
setOwnerObjectsArray((prev) => [...prev, newObject])