更新ui组件时，prop更改了反应

Question

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

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

因此，我试图将所有所有者列表从一个页面传递给所有者lastlist.jsx作为道具，以便当所有者的数组准备就绪（从mongodb中获取后）时，onererSlist.jsx可以显示列表中的那些人。

我希望它显示“加载...”，当Prop Array为空时，一旦准备就绪，我就希望它重新渲染组件。

但是，即使在数组到达之后，该页面仍显示“加载..”，并且不会改变。

我在这里做错了什么？

另外，如果我知道我缺少这种错误的反应的基本概念，那就太好了。

所有者listlist.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

利用三元运算符（条件？结果：else）来有条件地渲染一个返回语句的jsx。

Props更改将触发重新渲染，因此它将再次评估landerObjectSarray.length.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])