javascript - 组件渲染时如何设置 State false？ - 注册护士

Question

我是应用程序开发新手。如下所示，当“value”为 false 时，我希望呈现“Test”组件并且加载状态为 false。但是当我按照下面的代码执行操作时，出现下图中的错误。当此测试组件呈现在页面上时，如何将 state 设置为 false 而不会出现错误？

import React, { useState } from 'react'
import { Text, View } from 'react-native'


const WordPage = () => {

    let value = false

    const [loading, setLoading] = useState(false)

    const Test = () => {
        setLoading(false)
        return (
            <Text>OFFLINE</Text>
        )
    }

    return (
        <View>
            {value ?
                <Text>ONLINE</Text>
                :
                <Test />
            }
        </View>
    )
}

export default WordPage

Answer 1

您可以将回调作为 prop 传递，并在渲染 Test 组件后调用它。

import React, { useEffect, useState } from "react";
import { Text, View } from 'react-native'

const Test = ({ onRendered }) => {
  useEffect(onRendered, []);
  return <Text>OFFLINE</Text>;
};

const WordPage = () => {
  let value = false;
  const [loading, setLoading] = useState(false);

  return (
    <View>
      {value ? (
        <Text>ONLINE</Text>
      ) : (
        <Test
          onRendered={() => {
            setLoading(false);
          }}
        />
      )}
    </div>
  );
};

export default WordPage;