Javascript React Redux，如何在呈现新组件之前设置全局状态？

我目前正在学习react redux，并尝试使用从API获取的数组更新全局状态。触发onClick事件时，页面会在设置全局状态之前呈现新组件。当NavLink设置为“#”时，可以设置状态。在呈现新组件之前，如何让redux填充状态

我的主要目标是将获取的数组传递给另一个组件，以显示获取的信息

组成部分

function Selector(props) {
  const [alcoholCategory, setAlcoholCategory] = useState([]);

useEffect(() => {
    props.handleCategorySelection(alcoholCategory);
  });

  function handleImagePress(alc) {
    fetch(`https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=${alc}
    `)
      .then((r) => r.json())
      .then((result) => setAlcoholCategory(result.drinks))
      .then(props.handleCategorySelection(alcoholCategory));
  }
  console.log(alcoholCategory);
  return (
    <div className="selector-div">
      <ul>
        <li>
          <NavLink to="vodka" onClick={() => handleImagePress("Vodka")}>
            <img
              src="https://hips.hearstapps.com/vader-prod.s3.amazonaws.com/1583334281-smirnoff-1583334273.png"
              alt="alcohol-bottle"
              className="selector-bottle-img"
            ></img>
          </NavLink>
          <label>Vodka</label>
        </li>
<li>
          <a href="/rum" onClick={() => handleImagePress("Rum")}>
            <img
              src="https://hips.hearstapps.com/vader-prod.s3.amazonaws.com/1583334281-smirnoff-1583334273.png"
              alt="alcohol-bottle"
              className="selector-bottle-img"
            ></img>
          </a>
          <label>Rum</label>
        </li>
        <li>
          <a href="/tequila" onClick={() => handleImagePress("Tequila")}>
            <img
              src="https://hips.hearstapps.com/vader-prod.s3.amazonaws.com/1583334281-smirnoff-1583334273.png"
              alt="alcohol-bottle"
              className="selector-bottle-img"
            ></img>
          </a>
          <label>Tequila</label>
        </li>
      </ul>
    </div>
  );
}

const mapDispatchToProps = (dispatch) => {
  return {
    handleCategorySelection: (drinks) =>
      dispatch({ type: "DRINK_LIST", drinkArray: drinks }),
  };
};
export default connect(null, mapDispatchToProps)(Selector);

---

可以围绕新组件所依赖的store属性有条件地呈现该组件

父组件：

import React from 'react';
import {connect} from 'redux';
import anyActionYouNeed from '../actions/anyActionYouNeed'

const mapStateToProps = state => {
  return {
    drinkList: state.drinkList,
  }
}

const mapDispatchToProps = {
  anyActionYouNeed
}

//drinkList.length > 0 in your case
let Parent = ({drinkList, anyActionYouNeed}) => {
  return(
    <div>
      {drinkList.length > 0 && <NewComponent drinkList={drinkList}/>}
    </div>
  )
}

Parent = connect(
  mapStateToProps,
  mapDispatchToProps
)(Parent)

export default Parent

从“React”导入React；
从'redux'导入{connect}；
从“../actions/anyActionYouNeed”导入所需的任何操作
常量mapStateToProps=状态=>{
返回{
酒徒：州。酒徒，
}
}
const mapDispatchToProps={
你需要什么行动
}
//在您的情况下，drinkList.length>0
让家长=（{drinkList，anyactionyouneeded}）=>{
返回(
{drinkList.length>0&&}
)
}
父项=连接(
MapStateTops，
mapDispatchToProps
)（家长）
导出默认父级

当你说“新建组件”时，你是指第一次渲染，而不是重新渲染，对吗？

import React from 'react';
import {connect} from 'redux';
import anyActionYouNeed from '../actions/anyActionYouNeed'

const mapStateToProps = state => {
  return {
    drinkList: state.drinkList,
  }
}

const mapDispatchToProps = {
  anyActionYouNeed
}

//drinkList.length > 0 in your case
let Parent = ({drinkList, anyActionYouNeed}) => {
  return(
    <div>
      {drinkList.length > 0 && <NewComponent drinkList={drinkList}/>}
    </div>
  )
}

Parent = connect(
  mapStateToProps,
  mapDispatchToProps
)(Parent)

export default Parent