Question

为什么当我尝试控制台记录剪贴板文本时，文本正确显示，但是当我尝试在组件中将其返回时，它是对象？

这是我尝试返回内容时的样子

const App = () => {
  useEffect(() => {
    getContent();
  }, []);


  const getContent = async e => {
    try {
      const content =  await Clipboard.getString();
      return content;
    } catch (err) {
      const errors = err.response.data.errors;

      return errors;
    }
  };

  return (
    <View style={styles.container}>
      <Text>Clipboard: {JSON.stringify(getContent())}</Text>
    </View>
  );
};

结果是：{"_40":0,"_65":0,"_55":null,"_72":null}，但是当我将try语句更改为

时

return content;

到

console.log(content);

我在控制台日志中获得了正确的剪贴板。

Answer 1

根据您的示例，我相信会发生以下情况：

1）当您打印到控制台时，直到完成后，它才会打印。

2）当您在初始渲染中返回Promise的值时，它返回Promise content的当前值，但当时尚未兑现（这是字符串化的，描述性不强的object）。

您可以做的是使用useState钩子（请参阅https://reactjs.org/docs/hooks-state.html和https://gist.github.com/michalchudziak/f99d403abe90f11e8146c6f75416a0c8作为参考）。这样一来，您可以渲染初始值，然后在更新值后（Promise完成或返回错误时）重新渲染。

请注意，您不应呈现getContent()的返回值，而应呈现state的返回值，该值应设置为而不是return content。

请参阅以下灵感（未经测试）

const App = () => {
  const [clipboardContent, setClipboardContent] = useState('');

  useEffect(() => {
    getContent();
  }, []);


  const getContent = async e => {
    try {
      const content =  await Clipboard.getString();
      setClipboardContent(content);
    } catch (err) {
      const errors = err.response.data.errors;
      setClipboardContent(errors); // Might want to deal with this differently
    }
  };

  return (
    <View style={styles.container}>
      <Text>Clipboard: { clipboardContent }</Text>
    </View>
  );
};

React Native Clipboard返回的结果与控制台日志不同

1 个答案: