从 fetch 中反应 Native 设置 var

Question

在我的渲染函数中，我试图显示一家公司的名称。因此，我调用了一个函数 getCompanyByShortlink，我想在其中为 this.company 分配一个值 company_name。我检查了响应，它包含我需要的所有数据，所以这里没有问题。

但是这不起作用，没有分配值。如果我输入 return this.company = "test";直接，它工作得很好。

如果有人可以帮助我设置来自我的 API 的正确值，我将不胜感激。

谢谢，奥利弗

class Company extends React.Component {
   constructor(props){
   super(props);
   this.shortlink = this.props.shortlink;
   this.company = null;
}

getCompanyByShortlink(shortlink){
  //this works perfectly fine!
  // return this.company = "test";
  fetch('http://192.168.178.96:81/api/v1/companies/'+shortlink).then((response) => response.json())
  .then((responseJson) => {
  //this does not work for any reason.
  return this.company = responseJson.data.company.company_name;
})
  .catch((error) => {
    console.warn(error);
  });
}
render() {
  this.company =   this.getCompanyByShortlink(this.shortlink);
  return (
    <View style={styles.mainContainer}>
    <Text style={styles.mainWelcome}>Your Company: {this.company} </Text>
    </View>
    );
}

};

Answer 1

我不确定，但是你的 return 语句是 return 和词法 this，首先我的意思是编程习惯不好。您可以设置类似 this.that = that 的内容，然后设置 return that。您还在 return 中设置了一个赋值，这可能意味着副作用。它可能来自于此。如果有人对此持反对意见，请大声说出来！

Answer 2

您需要设置状态来重新渲染应用程序以显示该值。你可以打电话给

this.setState({ company: responseJson.data.company.company_name})

并在您的 render() 函数中设置 Your Company: {this.state.company}

同时在 componentDidMount() 上而不是在 render() 方法内部调用函数 getCompanyByShortlink()。因为每次状态更新都会调用 render 方法，所以当您向组件添加更多功能时，它可能会被调用多次。

你会很高兴的。

Answer 3

您不应该在渲染函数中执行异步操作。试试这样：

class Company extends React.Component {
  constructor(props){
    super(props);
    this.shortlink = this.props.shortlink;

    this.state = {
      company: null
    };

    this.getCompanyByShortlink(this.shortlink).then((company) => {
      this.setState({company});
    });
  }

  getCompanyByShortlink(shortlink){
    //this works perfectly fine!
    // return this.company = "test";

    fetch('http://192.168.178.96:81/api/v1/companies/'+shortlink)
      .then((response) => response.json().data.company.company_name)
      .catch((error) => console.warn(error));
  }

  render() {
    return (
      <View style={styles.mainContainer}>
      <Text style={styles.mainWelcome}>Your Company: {this.state.company} </Text>
      </View>
      );
  }
}

从 fetch 中反应 Native 设置 var

React Native set var from fetch

javascript

reactjs

react-native

react-android