React Hooks无法更新状态

Question

我正在尝试从API响应更新状态。我尝试以componentDidUpdate的身份使用useEffect，但组件持续呈现。我只想渲染一次。下面是代码快照，

// 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

确保你调用的是正确的嵌套数组和对象所以..)，如果可以，尝试如下所示：

// 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();
  }, []);

您需要在[]数组上声明要监视哪些变量，并且每次更新这些变量时，都会有组件的重新呈现过程。