使用条件导致 React 渲染限制错误

如何解决使用条件导致 React 渲染限制错误

我做了一个暗模式功能。有使用复选框并获取当前小时来更改此模式。当我编写传统的 If 语句时，它会导致渲染限制错误（如堆栈溢出）。

这是我的代码：

public class Anniversary extends AppCompatActivity {

private RecyclerView recyclerView;
private RecyclerView.LayoutManager layoutManager;
private RecyclerView.Adapter adapter;
TextView Nametxt;
TextView Datetxt;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_anniversary);
    Nametxt = findViewById(R.id.annviersaryNametxt);
    Datetxt = findViewById(R.id.annviersaryDatetxt);


    recyclerView = findViewById(R.id.anniversaryRecylerView);
    layoutManager = new linearlayoutmanager(this);
    recyclerView.setLayoutManager(layoutManager);

    adapter = new AnniversaryAdapter();
    recyclerView.setAdapter(adapter);


    Toolbar toolbar = findViewById(R.id.toolbar);
    toolbar.setTitle(getResources().getString(R.string.app_name));

    //define the recyclerview
    RecyclerView recyclerView = findViewById(R.id.anniversaryRecylerView);
    setSupportActionBar(toolbar);

    FloatingActionButton fab = findViewById(R.id.fab);
    fab.setonClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            StartNewActivity();
        }
    });
    add();

}



// start new activity method
public void StartNewActivity(){
    Intent intent = new Intent(this,Add.class);
    startActivity(intent);
}
private void add() {
    Intent intent = getIntent();
    String name = intent.getStringExtra(Add.NAME);
    String date = intent.getStringExtra(Add.DATE);

    Datetxt.setText(date);
    Nametxt.setText(name);
}

我无法从 Internet 上找到解决方案。

我认为答案是使用 UseEffect 方法，但我真的不知道如何在我的情况下使用它。或者这个复选框会导致这个无限变化的值？

你能帮我解决这个问题吗？

解决方法

在 React 风格中，我会这样做：

 import React,{ useState,useEffect } from "react";

const App = () => {
  const [isNight,setDarkMode] = useState(false);

  useEffect(() => {
    let t = new Date().getHours().valueOf();
    setDarkMode(t < 6 || t > 19);
  },[]);

  return (
    <div className={isNight ? "dark-mode" : "light-mode"}>
      <div>{isNight ? "dark-mode" : "light-mode"}</div>
      <input
        type="checkbox"
        onChange={(e) => setDarkMode(e.target.checked)}
        checked={isNight}
        name="darkModeInput"
      />
      <label htmlFor="darkModeInput">Switch dark mode</label>
    </div>
  );
};

export default App;