1

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

但是这不起作用，没有分配值。如果我输入 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>
    );
}

};

4

3 回答 3

2

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

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>
      );
  }
}
于 2016-05-16T14:34:22.877 回答
0

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

于 2016-05-16T14:24:56.310 回答
0

您需要 setState 重新渲染应用程序以显示该值。你可以打电话

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

在你的render()功能集中Your Company: {this.state.company}

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

你会很高兴的。

于 2016-05-16T14:30:12.807 回答