帶有if陳述句的useEffect不起作用React

當 package 的值為空字串時，我正在嘗試將值設定為 id 'packageStatus'。控制臺中的錯誤顯示：無法讀取 null 的屬性（讀取 'children'）。我嘗試在 getParent() 之前和之后放置 if 陳述句，但它不起作用。這是我的資料庫，您可以在其中設定子項下的包：

{
  "parents": [
    {
      "id": 0,
      "name": "Anna",
      "adress": "Skatgatan 6",
      "children": [
        {
          "age": "2 m?nader",
          "package": ""
        }
      ]
    }
  ],
  "packages": [
    {
      "id": 0,
      "size": "Small strl: 44-50"
    },
    {
      "id": 1,
      "size": "MEDIUM strl: 50-56"
    },
    {
      "id": 2,
      "size": "Large strl: 56-62"
    }
  ]
}

這是我的反應組件：

import { Link } from 'react-router-dom';
import { useEffect, useState } from 'react';
import '../style/Welcome.css';
import Navbar from './Navbar';
import '../style/Button.css';

const Welcome = () => {
  const [parent, setParent] = useState(null);

  useEffect(() => {
    const getParent = async () => {
      const response = await fetch('http://localhost:3001/parents/0').then(
        (response) => response.json()
      );
      // update the state
      setParent(response);
    };
    getParent();
    //if() not working...
    // if (parent.children[0].package === "") {
    //     getParent();
    //     document.getElementById('packageStatus').innerHTML = 'inget kl?dpaket ?nnu';
    //   }
  }, []);

  return (
    <div className='flex flex-col bg-white h-full bg-opacity-80'>
      <Navbar />
      <div className='mt-8 space-y-8'>
        <div className='text-black text-4xl font-bold'>
          {parent && <h1>V?lkommen {parent.name}!</h1>}
        </div>
        <div className='bg-white mx-8 shadow-lg py-4 rounded-lg'>
          {parent && (
            <div className='space-y-4 text-xl'>
              <div>
                <p>
                  Du har{' '}
                  <span className='font-bold'>{parent.children.length}</span>{' '}
                  barn registrerat
                </p>
                <p>
                  som ?r{' '}
                  <span className='font-bold'>{parent.children[0].age}</span>{' '}
                  gammalt.
                </p>
                <p>
                  och har{' '}
                  <span id='packageStatus' className='font-bold'>
                    {parent.children[0].package}
                  </span>
                  .
                </p>
              </div>
              <div>
                <p>Din registrerade adress ?r:</p>
                <p>{parent.adress}</p>
              </div>
              <p className='text-orange-300 underline'>
                St?mmer inte dina uppgifter?
              </p>
            </div>
          )}
        </div>
      </div>
      <div className='mt-auto p-4'>
        <button className='bg-orange-400 text-2xl rounded-lg px-16 py-2'>
          <Link to='/Select'>G? VIDARE</Link>
        </button>
      </div>
    </div>
  );
};

export default Welcome;

uj5u.com熱心網友回復：

React 的狀態更新不是立即的。因此，在呼叫 之后getParent， parent 是null。只有在fetch請求完成并且 React 的狀態更新完成后，parent才會null（如果response不是null）。

您可以做的是設定parent依賴useEffect項并首先檢查是否parent已定義：

useEffect(() => {
    const getParent = async () => {
        const response = await fetch('http://localhost:3001/parents/0').then(
            (response) => response.json()
        );
        // update the state
        setParent(response);
    };
    getParent();

    if (parent && parent.children[0].package === "") {
        getParent();
        document.getElementById('packageStatus').innerHTML = 'inget kl?dpaket ?nnu';
    }
    // parent is in useEffect's dependency list
}, [parent]);

更好的解決方案是使用第二個useEffect和提取getParent功能：

const getParent = async () => {
    const response = await fetch('http://localhost:3001/parents/0').then(
        (response) => response.json()
    );
    // update the state
    setParent(response);
};

useEffect(() => {
    getParent();
}, []);

useEffect(() => {
    if (parent && parent.children[0].package === "") {
        getParent();
        document.getElementById('packageStatus').innerHTML = 'inget kl?dpaket ?nnu';
    }
}, [parent]);

標籤：反应if 语句反应钩子

上一篇：從資料框串列上的ifelse陳述句中繪制bernouli結果

下一篇：在Google表格中查找多個列并從匹配項中回傳一個串列