等待 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'))

上面的代码returns一个错误：

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 将是一个不可变对象？但是我在任何地方都看不到代码。

Answer 2

我认为你可以使用 useEffect 取决于 options 和 greeting

的变化

当options有值时，可以获取label

useEffect(()=>{
  if(options && options.length > 0){
    var test = (options.find(x => x.value === greeting));
    console.log(test && test.get('label'));
  }
},[options, greeting]);

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

waiting for useeffect to finish and then accessing object properties

javascript

reactjs

react-hooks

use-effect

use-state