如何在尚未定义对象的情况下通过道具发送对象的 属性？

Question

碰巧我有一个对象有三个属性，每个属性都包含一个数组，我需要将这些属性传递给另一个组件，但详细信息是该对象尚未添加到钩子或变量中，以后补上。

我怎么能做到这一点，我在 stackblitz 中添加了我收到的错误代码。

code

Answer 1

Conditional Rendering

常见模式是在数据可用时有条件地呈现子项。

export default function App() {
  const [object, setObject] = useState({}); // provide initial state!!

  useEffect(() => {
    setTimeout(() => {
      setObject({
        0: [1, 1, 1, 1, 1],
        1: [2, 2, 2, 2, 2],
        2: [3, 3, 3, 3, 3]
      });
    }, 3000);
  }, []);

  return (
    <div>
      {Object.values(object).length ? (
        <Component1 object={object[0]} />
      ) : (
        "loading..."
      )}
    </div>
  );
}