值首先是未定义的，然后是正常的，但仍然在页面呈现上收到未定义

Question

我设法从数据库中更新了一个布尔值，但我现在想在界面中获取该值，这样用户就能准确地看到数据库中的值。

我是用 redux 做的，所以这是我的操作：

export const getSettings = () => async (dispatch) => {
  dispatch({ type: CHANGE_SETTINGS_REQUEST, payload: {} });
  try {
    const { data } = await Axios.get(
      "http://localhost:3030/v1/lootbox/getSettings"
    );
    dispatch({ type: CHANGE_SETTINGS_SUCCESS, payload: data });
    localStorage.setItem("changeSettingsInfo", JSON.stringify(data));
  } catch (error) {
    dispatch({
      type: CHANGE_SETTINGS_FAIL,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message,
    });
  }
};

在组件中我有以下内容：

import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { changeSettings, getSettings } from "../../actions/adminActions";
import MessageBox from "../../components/ErrorBox/MessageBox";
import LoadingBox from "../../components/Spinner/LoadingBox";

export default function LootboxSettings() {
  const getSetting = useSelector((state) => state.getSetting);
  const { changeSettingsInfo, loading, error } = getSetting;
  const [checked, setChecked] = useState(changeSettingsInfo?.isVisible);

  const dispatch = useDispatch();

  const handleCheck = () => {
    setChecked(!checked);
  };

  const submitHandler = (e) => {
    e.preventDefault();
    dispatch(changeSettings(checked));
  };

  useEffect(() => {
    dispatch(getSettings());
  }, []);

  return (
    <>
      <div className='login'>Lootbox Settings</div>
      {changeSettingsInfo && (
        <form className='swapping-currency-checkbox' onSubmit={submitHandler}>
          {loading && <LoadingBox></LoadingBox>}
          {error && <MessageBox variant='danger'>{error}</MessageBox>}
          <label>Is lootbox visible?</label>
          <input
            type='checkbox'
            className='swapping-currency-check'
            id='location'
            name='location'
            checked={checked}
            onChange={handleCheck}
            value='checkbox'
          />
          <div>
            <button className='buttonAccount swapping-btn' type='submit'>
              Save
            </button>
          </div>
        </form>
      )}
    </>
  );
}

因此，如果我 console.log changeSettingsInfo，我会得到未定义的值，然后是数据库中的布尔值（这就是我使用 ? 可选参数的原因），如果我删除可选参数，我会得到一个错误，因为它是未定义的，这里是日志：

我做错了什么，但我不知道是什么，也许是在 useEffect 上。我能做什么？

Answer 1

试试这个来反映变化：

useEffect(() => {
    setChecked(changeSettingsInfo?.isVisible);
}, [changeSettingsInfo]);

解释：

UI 由一个局部状态变量绑定，该变量在安装组件时初始化。 dispatch 触发 store 的变化，其值作为 props 传递给功能组件。在 UI 上造成 re-render。在你的情况下，你的控制台仍然打印 undefined for state variable checked 因为坦率地说，在组件的 re-rendering 上你没有设置 checked 的值因此，为了做到这一点，创建一个专门的 useEffect，只要变量 changeSettingsInfo 的值发生变化就会触发。

值首先是未定义的，然后是正常的，但仍然在页面呈现上收到未定义

Value is coming undefined first, then is coming alright, but still receive undefined on the page render

javascript

reactjs

redux

react-redux