组件调用不显示值

Question

我正在使用从数据库中获取的数据构建一个选择器。它工作正常，但我无法将存储在 auth.token（在 useAuth 组件中）的值发送到 URL。我试了很多方法都不行，你能告诉我怎么办吗？

//Call
import useAuth from "../hooks/useAuth";

const ValorToken = () => {
  const { auth } = useAuth();
  const valorToken = auth.token;
  return (valorToken)
};

export default class Cias extends Component {
  componentDidMount() {
    return fetch('https://url-test-test.es/api_movil/test.php', {
      method: 'POST',
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${ValorToken}`,
      },
      body: JSON.stringify({
        token: ValorToken,
        id_marca: '5'
        })
      })
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          dataSource: responseJson,
      }, function() {});
    })
    .catch((error) => {
      console.error(error);
    });
  };
}

Answer 1

基本上，useAuth 是一个依赖于 React 核心挂钩（useState、useEffect、...）的 React Hook，因此它应该只在函数组件中调用。

如果您想要这种行为（从 class 组件

中的反应挂钩获取值，这里是另一个实现

import React from 'react';

class Cias extends React.Component {
  componentDidMount() {
    const {valorToken} = this.props;
    return fetch('https://url-test-test.es/api_movil/test.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${valorToken}`,
      },
      body: JSON.stringify({
        token: valorToken,
        id_marca: '5',
      }),
    })
      .then(response => response.json())
      .then(responseJson => {
        this.setState(
          {
            isLoading: false,
            dataSource: responseJson,
          },
          function () {},
        );
      })

      .catch(error => {
        console.error(error);
      });
  }
}

const CiasWrapper = () => {
  const {auth} = useAuth();

  return <Cias valorToken={auth.token} />;
};

export default CiasWrapper;

但作为最佳实践，您应该使用功能组件作为挂钩，您可以使用像

这样的功能组件实现相同的行为

import React, {useEffect, useState} from 'react';
import {View} from 'react-native';

const Cias = () => {
  const {auth} = useAuth();
  const [isLoading, setIsLoading] = useState(true);
  const [dataSource, setDataSource] = useState();

  useEffect(() => {
    fetch('https://url-test-test.es/api_movil/test.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${auth.token}`,
      },
      body: JSON.stringify({
        token: auth.token,
        id_marca: '5',
      }),
    })
      .then(response => response.json())
      .then(responseJson => {
        setDataSource(responseJson);
        setIsLoading(false);
      })

      .catch(error => {
        console.error(error);
      });
  }, []);

  return <View />;
};

export default Cias;

您可以在 react docs

阅读有关功能组件和挂钩的更多信息

组件调用不显示值

Component call does not display value

javascript

react-native

react-native-component