React Hooks 无法更新状态

Question

我正在尝试从 API 响应更新状态。 从 API 获取响应但它没有更新到状态。我尝试将 useEffect 作为 componentDidUpdate 但该组件正在持续呈现。 我只想渲染一次。 下面是代码快照，

// I want to update to lookup data
 const [lookUpData, setLookUpdata] = useState({
    BlueLaws: [],
    Departments: [],
    ProdCodes: [],
    Fees: [],
    IdChecks: [],
    IndustryStandards: [],
    Tax: []
  })
// calling getLookUpdata from useEffect()
useEffect(() => {
    getLookUpdata();
  }, []);

// Defination of getLookUpdata method
const getLookUpdata = () => {
    var postData = {};
    postData.storeID = "xxxx";
    postData.posType = 0;
    axios.post(url, postData).then(res => {
      if (res.status === 200 && res.data.response && res.data.response.length > 0) {
       res.data.response[0].blueLaws.length > 0 && setLookUpdata({ ...lookUpData, BlueLaws: res.data.response[0].blueLaws[0].blueLaws })
        res.data.response[0].departments.length > 0 && setLookUpdata({ ...lookUpData, Departments: res.data.response[0].departments[0].departments })
        res.data.response[0].departments.length > 0 && setLookUpdata({ ...lookUpData, ProdCodes: res.data.response[0].departments[0].prodCodes })
        res.data.response[0].fees.length > 0 && setLookUpdata({ ...lookUpData, Fees: res.data.response[0].fees[0] })
        res.data.response[0].idChecks.length > 0 && setLookUpdata({ ...lookUpData, IdChecks: res.data.response[0].idChecks[0].ageValidations })
        res.data.response[0].industryStandards.length > 0 && setLookUpdata({ ...lookUpData, IndustryStandards: res.data.response[0].industryStandards[0].industryStandards })
        res.data.response[0].tax.length > 0 && setLookUpdata({ ...lookUpData, Tax: res.data.response[0].tax[0].taxRates })
      } else if (res.status === 409) {
        console.log(res.data.error)
      }
    }).catch(err => {
      console.log(err);
    })

  }

Answer 1

确保您正在调用正确的嵌套数组和对象（您需要 data.response[0] 吗？...等等...），如果可以，请尝试以下操作：

// I want to update to lookup data
  const [lookUpData, setLookUpdata] = useState({
    BlueLaws: [],
    Departments: [],
    ProdCodes: [],
    Fees: [],
    IdChecks: [],
    IndustryStandards: [],
    Tax: [],
  });

  // calling getLookUpdata from useEffect()
  useEffect(() => {
    async function getLookUpdata() {
      var postData = {};
      postData.storeID = 'xxxx';
      postData.posType = 0;

      try {
        const {data} = await axios.post(url, postData);
        data.response[0].blueLaws.length > 0 &&
          setLookUpdata({
            ...lookUpData,
            BlueLaws: data.response[0].blueLaws[0].blueLaws,
          });
        data.response[0].departments.length > 0 &&
          setLookUpdata({
            ...lookUpData,
            Departments: data.response[0].departments[0].departments,
          });
        data.response[0].departments.length > 0 &&
          setLookUpdata({
            ...lookUpData,
            ProdCodes: data.response[0].departments[0].prodCodes,
          });
        data.response[0].fees.length > 0 &&
          setLookUpdata({
            ...lookUpData,
            Fees: data.response[0].fees[0],
          });
        data.response[0].idChecks.length > 0 &&
          setLookUpdata({
            ...lookUpData,
            IdChecks: data.response[0].idChecks[0].ageValidations,
          });
        data.response[0].industryStandards.length > 0 &&
          setLookUpdata({
            ...lookUpData,
            IndustryStandards:
              data.response[0].industryStandards[0].industryStandards,
          });
        data.response[0].tax.length > 0 &&
          setLookUpdata({
            ...lookUpData,
            Tax: data.response[0].tax[0].taxRates,
          });
      } catch (error) {
        console.log(error);
      }
    }

    getLookUpdata();
  }, []); // <<<< make sure if you will need the dependency

Answer 2

在 useEffect 代码中：

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

需要在[]数组上声明哪些变量需要观察，每次更新都会有组件的重新渲染过程。