Question

我正在尝试编写我的第一个React本机应用程序，因此它不会做任何真正复杂的事情，只是让您对事物有所了解。现在，它具有一个按钮，当我按下该按钮时，它将使文本字段增加1，并且我还希望该按钮现在显示我导入的另一个函数中的一些文本。

我有主App.js和导入到App.js的另一个文件，其中包含一个返回字符串值的函数

import { myFunction } from './JSFunctions/functions.js'

myFunction单独运行良好，并且会通过console.log将结果打印到控制台，但是当我添加该行时

return output

我所能得到的

Promise { <pending> }

我意识到我需要以某种方式使用await或.then来兑现承诺，但是我一直在桌子上敲打我的头几个小时，试图使它正常工作，但我只是出错了。

这是功能

export async function myFunction(){
\\lots of other code here that has been removed 
    var i;
    var output;
    for (i = 0; i < length; i++) { 
        output = DO STUFF AND CREATE A LONG STRING HERE
        console.log(output) //produces the correct output to console
    }
    return output;     
}

这是App.js中的函数

export default class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = { 
      count: 0, 
      output_string: ''
    }
  }

  onPress = () => {
    this.setState({
      count: this.state.count+1,
      output_string: myFunction()
    })

  }  


  render(){ 
    const handlePress = () => false
    return (
    <React.Fragment>
      <View style = {styles.container}>
        <TouchableOpacity
          onPress={this.onPress}
        >
          <Text>
            My First Button
          </Text>
        </TouchableOpacity>

        <Text>Hello World! This is a text area.</Text>
        <Text>{ this.state.count !== 0 ? this.state.count: null}</Text>
        <Text>{this.state.output_string}</Text>
      </View>
    </React.Fragment>
    );
  }

}

Answer 1

最近我问过类似的question，基本上是因为myFunction是async函数，因此它只会返回Promise。

您有两个选择，要么链接.then，要么使onPress使用async方法


onPress = async () => {
    this.setState({
      count: this.state.count+1,
      output_string: await myFunction()
    })

  }

Answer 2

在then回调中设置状态，该回调链接到Promise返回的myFunction：

onPress = () => {
  myFunction().then(output => {
    this.setState({
      count: this.state.count+1,
      output_string: output
    });
  })
}

更新

您还可以使用async / await语法：

onPress = async () => {
  const output = await myFunction();
  this.setState({
    count: this.state.count+1,
    output_string: output
  });
}

更新

OP正在询问count和output_string是否可以独立更新。这是使用async / await的示例：

onPress = async () => {
  this.setState({ count: this.state.count + 1 });  // This happens immediately
  this.setState({
    output_string: await myFunction()
  });  // This happens as soon as the Promise returned by myFunction resolves
}

Answer 3

从await删除myFunction关键字。

就目前而言，您是说该函数是异步的（因此使用async关键字），（简单而言）这意味着它可能不会立即解析一个值。

正因为如此，返回了promise，这（再次简单来说）保证会在某个时间点返回值。

我强烈建议您阅读有关异步/等待的内容。

编辑：或者，如果您希望函数保持异步，则可以使用@ brian-lives-outdoors建议。

似乎无法返回价值，只有承诺

3 个答案: