javascript - 等待 useEffect 完成，然后访问对象属性

Question

我有以下代码:

const [files, setFiles] = useState([]);
const [greeting, setGreeting] = useState(0);
const [menu, setMenu] = useState([]);
const [options, setOptions] = useState([]);
var customer_id = 1;

useEffect(() => {
    async function getFiles() {
      
      var data = {
        "customer-id": customer_id
      };
      let response = await axios.post(`http://localhost:2000/files/get-files`, data)
      //let response = await axios.post(`/files/get-files`, data)
      for (let i = 0; i < response.data.length; i++) {
        setOptions(oldArray => [...oldArray, {'value': response.data[i]['id'], 'label': response.data[i]['name']}])
      }
      setFiles(response.data)
    }
    async function getIVR() {
      
        var data = {
          "customer-id": customer_id
        };
        let response = await axios.post(`http://localhost:2000/files/get-ivr`, data)
        //let response = await axios.post(`/files/get-ivr`, data)
        
        setGreeting(response.data[0]['greeting'])
        setMenu(response.data[0]['menu'])
    }

    getFiles()
    getIVR() 
}, []);
var test = (options.find(x => x.value === greeting))
console.log(test.get('label'))

上面的代码返回一个错误:

TypeError: Cannot read property 'get' of undefined

这是因为第一次渲染时标签不存在，因为选项还没有填充。然而，当我只是 console.log(test) 时，我可以看到在几毫秒后它被填充，如日志所示:

27GreetingMenu.js:53 undefined
GreetingMenu.js:53 undefined
GreetingMenu.js:53 {value: 3, label: "Test Menu"}
GreetingMenu.js:53 {value: 3, label: "Test Menu"}
GreetingMenu.js:53 {value: 3, label: "Test Menu"}
GreetingMenu.js:53 {value: 3, label: "Test Menu"}

我要怎么做才能一直获取label的值。这可以通过某种方式等待 useEffect 完成来完成，这意味着选项很好，这意味着我可以解析它。

告诉我!

Answer 1

我认为您在这里试图解决错误的问题。

首先:这是因为第一次渲染时标签不存在，因为选项还没有填充 - 不完全正确。问题不是 label 属性没有设置，而是 test 未定义，因为 find 没有匹配。

与其尝试等待 useEffect 完成(您不能直接这样做)，不如做一个简单的检查以确保在使用之前定义了 test它作为一个对象。

var test = (options.find(x => x.value === greeting))

// Easiest solution
console.log(test?.get('label'))

// Without nullsafe operator
console.log(test && test.get('label'))

作为旁注，因为您接下来可能会遇到此错误:我没有看到 get 方法被添加到 options 中的对象？所以接下来你可能会得到一个错误，说 .get 不是一个函数。

看起来您可能假设 test 将是一个不可变对象(immutable对象)？但我在任何地方都看不到代码可以证明这一点。