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

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

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>
      );
  }
}

Answer 2

我不确定，但你的return语句是以词法this返回的，首先我的意思是错误的编程习惯。您可以设置this.that = that之类的内容，然后返回that。您还在返回中设置了一个可能意味着副作用的分配。它可能来自那个。如果某人有专业人士请反对，请说出来！

Answer 3

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

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

并在render()函数集Your Company: {this.state.company}

中

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

你会很高兴。

来自fetch

3 个答案: