從 React Native 對象數組訪問單個對象的值

Question

我在嘗試訪問數組中某個對象的某些值時遇到問題，該數組是我從 Axios Get 方法收到的響應。

我想分別訪問數組的每個對象的 id、dateTime、sensorData 等值，例如 result[0].id（dateTime、sensorData 等）。

我的部分代碼：

 const ShowSensorsScreen = ({ navigation }) => { const [ result, setResult ] = useState([]); const id = navigation.getParam('id'); useEffect(() => { getResult(id); }, []); const getResult = async id => { const response = await searchApi.get(`/sensorData/${id}`); setResult(response.data); }; console.log(result[0]); return ( <ImageBackground source={backgroundImage} style={styles.ImageBackground}> <Bar> <Text style={styles.textStyle}> {result[0].dateTime} </Text> </Bar> <SensorsDetail evaluation={result} /> </ImageBackground> ); };

使用 console.log(result) 甚至 console.log(result[ index ]) 一切正常，但嘗試使用 result[0].id 得到一個錯誤，說 undefined 不是一個對象......

來自 console.log(result) 的示例：

 Array [] Array [ Object { "sensorData01": "100.00000", "sensorData02": "101.00000", "sensorData03": "102.00000", "sensorData04": "103.00000", "dateTime": "2020-01-06T23:10:56Z", "id": 1, "idEvaluation": 1, }, Object { "sensorData01": "110.00000", "sensorData02": "111.00000", "sensorData03": "112.00000", "sensorData04": "113.00000", "dateTime": "2020-01-06T23:11:16Z", "id": 2, "idEvaluation": 1, }, ]

從 console.log(result[0]):

 undefined Object { "dadosSensor01": "100.00000", "dadosSensor02": "101.00000", "dadosSensor03": "102.00000", "dadosSensor04": "103.00000", "dataHora": "2020-01-06T23:10:56Z", "id": 1, "idAvaliacao": 1, }

我會感謝我能得到的任何幫助！

Answer 1

問題是setResult (hooks) 是異步的，並且您在設置狀態之前正在打印result.data 。 一旦您在結果中設置了正確的數據，請嘗試以下打印。

React.useEffect(() => {
    console.log(result[0]);
  }, [result]);

const searchApi = async (searchAppointment) => {
       console.log('Searching appointment...');
       setIsLoading(true);
       try {
               const response = await baseURL.get(
                   `/sensorsData/${searchAppointment}`);
           console.log(response.data[0]);
           setResult(response.data);
           console.log(result[0])
       } catch (err) {
           console.log(err);
           setErrorMessage('Something went wrong, please try again later...');
       }
       setIsLoading(false);
   };

請參考這里的 useState 回調 - useState 回調

Answer 2

所以我從另一篇文章中得到了幫助，結果證明我必須使用.map()來做我需要的事情，結果是這樣的：

 const sensor01 = avaliacao.map((item) => item.dadosSensor01); const sensor02 = avaliacao.map((item) => item.dadosSensor02); const sensor03 = avaliacao.map((item) => item.dadosSensor03); const sensor04 = avaliacao.map((item) => item.dadosSensor04);

如果有人有更好的其他方式，我很樂意聽到，現在，我感謝大家的大力支持！