如何在使用中重新渲染组件

Question

好吧：

create or replace procedure update_cars
AS
v_date date;
begin
--execute immediate 'alter session set NLS_DATE_FORMAT='DD-MON-YY HH24:MI:SS'';
select max(inventory_date) from car_equipment into v_date;
return v_date;
insert /*+APPEND*/ into car_equipment    (count_cars,equipment_type,location,inventory_date,count_inventory) 
select   count_cars,equipment_type,location,inventory_date,count_inventory from car_source where inventory_date > v_date;
end;
/

每次使用props.lang更改时，在useEffect内应该如何重新渲染组件？

---

解决方案：

我通过改变一些问题的思想来解决这个问题（我使用另一个功能来很好地应对语言变化。

Answer 1

按照React文档中的说明，将您的useEffect视为componentDidMount，componentDidUpdate和componentWillUnmount的组合。

要像componentDidMount一样工作，您需要这样设置useEffect：

  useEffect(() => console.log('mounted'), []);

第一个参数是将基于第二个参数（它是一个值数组）触发的回调。如果第二个参数中的任何值发生更改，将触发您在useEffect内部定义的回调函数。

但是，在所显示的示例中，我将传递一个空数组作为第二个参数，并且该参数永远不会更改，因此，在安装组件时，回调函数将被调用一次。

这种总结useEffect。如果不是空值，则有一个参数，例如您的情况：

 useEffect(() => {

  }, [props.lang]);

这意味着每次“ props.lang”更改时，您的回调函数都会被调用。除非您要在该回调函数中管理可能触发重新渲染的状态，否则useEffect不会真正重新渲染组件。

更新：

如果您要触发重新渲染，则渲染功能需要在useEffect中具有要更新的状态。

例如，在这里，渲染功能首先将英语显示为默认语言，并且在我的使用效果中，我在3秒钟后更改了该语言，因此渲染将重新渲染并开始显示“西班牙语”。

function App() {
  const [lang, setLang] = useState("english");

  useEffect(() => {
    setTimeout(() => {
      setLang("spanish");
    }, 3000);
  }, []);

  return (
    <div className="App">
      <h1>Lang:</h1>
      <p>{lang}</p>
    </div>
  );
}

完整代码：

Answer 2

你可以简单地这样做

如果您想从 useEffects() 启动重新渲染，请添加一个虚拟状态，您可以更改以启动重新渲染。

const [rerender, setRerender] = useState(false);

useEffect(()=>{

    ...
    setRerender(!rerender);
}, []);

这将确保重新渲染，因为组件在状态更改时重新渲染

Answer 3

const [state, set] = useState(0);

useEffect(() => {
  fn();
},[state])

function fn() {
  setTimeout((), {
    set(prev => prev + 1)
  }, 3000)
}

上面的代码将每 3 秒重新渲染一次 fn 函数。