reactjs - 必须运行函数 2 次才能将值设置为 react 状态？

Question

代码:-

const [TimeStampsFromFile, setTimeStampsFromFile] = useState([])
const FilePicker = async () => {
        var RNFS = require('react-native-fs')
        // Pick a single file
        try {
            const res = await DocumentPicker.pick({
                type: [DocumentPicker.types.plainText],
            })
            const filepath =
                RNFS.ExternalStorageDirectoryPath + '/' + 'TimeStamps' + '/' + res.name
            const file = await RNFS.readFile(filepath)

            setTimeStampsFromFile(await file.split('\n'))
            console.log('file data' + TimeStampsFromFile)
        } catch (err) {
            if (DocumentPicker.isCancel(err)) {
                // User cancelled the picker, exit any dialogs or menus and move on
            } else {
                throw err
            }
        }
    }

此函数在我的 React native 应用程序中按下按钮时运行:-

第一次按下时，它需要返回值，但它什么也没有返回。但是在第二次按下时它返回值。 (这是为什么？？)还是我在代码中犯了一些错误？？

同样的事情也发生在我的另一个按钮上。

我找到了这个答案:- hooks not set state at first time但无法解决我的问题(如果你能从这个答案中得到帮助的话)

Answer 1

TimeStampsFromFile 是空的，因为 setTimeStampsFromFile 是异步的。如果你想在值更新时记录 TimeStampsFromFile，你可以使用 useEffect 钩子(Hook)，如:

useEffect(() => {
   console.log(TimeStampsFromFile);
}, [TimeStampsFromFile]);

这样，每次 TimeStampsFromFile 改变他的值时，都会调用 useEffect 并且 log 会显示当前值。

如果您需要从FilePicker 函数中获取TimeStampsFromFile 的值，则无需从TimeStampsFromFile 中获取该值。你可以这样做:

...
const splitFile = await file.split('\n');
setTimeStampsFromFile(splitFile)
console.log('file data' + splitFile)
...