当我尝试获取API时，为什么我的react应用程序呈现了两次，并在第一次呈现时给我一个空数组？

Question

第二次渲染成功，但副作用是my child组件使用其父级的上下文值作为初始状态（使用useState挂钩）将其初始状态设置为空数组。我正在使用React挂钩（useState、useContext、useReducer、useffect）

应用程序。js:

...
export const MainContext = React.createContext();

const initialState = {
  data: [],
};

const reducer = (state, action) => {
  switch (action.type) {
    case "ADD_LIST":
      return { ...state, data: action.payload };
    default:
      return state;
  }
};

function App() {
  const [dataState, dispatch] = useReducer(reducer, initialState);
  const fetchData = () => {
    axios
      .get("http://localhost:3005/data")
      .then((response) => {
        const allData = response.data;
        if (allData !== null) {
          dispatch({ type: "ADD_LIST", payload: allData });
        }
      })
      .catch((error) => console.error(`Error: ${error}`));
  };

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

  console.log("useReducer", dataState); //LOG 1

  return (
    <div>
      <MainContext.Provider
        value={{ dataState: dataState, dataDispatch: dispatch }}
      >
        <MainPage />
      </MainContext.Provider>
    </div>
  );
}
export default App;

我的子组件Main Page.jsx

...
function MainPage() {
  const mainContext = useContext(MainContext);
  const data = mainContext.dataState.data;
  const uniqueList = [...new Set(data.map((list) => list.type))];
  console.log("uniqueList", uniqueList); // LOG 2
  const [uniqueType, setUniqueType] = useState(uniqueList);
  console.log("uniqueType State", uniqueType); // LOG 3
  const catAlias = {
    account: "Account",
    commandLine: "Command",
    note: "Note",
    bookmark: "Bookmark",
  };
  return (
  // jsx code, not necessary with the issue
  )
};

结果：结果图像

如您所见，尽管uniqueList已经填充了数组，但uniqueType状态仍然为空。我的目标是在第一次渲染时将uniqueType初始状态设置为uniqueList。

Answer 1

这是预期的行为。用于状态初始化的值仅在第一次渲染中使用。在后续渲染中，组件需要使用useffect来跟踪值更改。

UseEffect(()=>{
 // unique list update.
}, [data]);