Javascript 为什么我的代码在显示结果之后而不是之前更新数组？

因此，我的react应用程序中有这段代码，我试图使用它根据传递到它类别中的prop更新app.js文件中的siblingarray状态，但出于某种原因，即使更新了prop.category，发布到我控制台的数组也是前一个类别的siblingarray

CategoryList组件，在从App.js将新类别道具传递到同级数组中后，该组件应更新同级数组：

class CategoryList extends Component {
  constructor() {
    super();
    this.state = {
      menuClicked: false,
      classes: ["list-item"],
      listitems: [],
      super: 0,
      siblingarray: [],
      setup: 0
    };
  }
  componentDidUpdate(prevProps, prevState) {
    //test to make sure if update is required

    if (
      (this.state.setup === 0 || this.props.setup === 0) &&
      (this.props.category != prevProps.category || this.state.setup === 0) &&
      this.props.category !== 0
    ) {
      /*this.setState({
          setup:1
      })*/
      axios
        .post("../api/pochecklist.php", {
          category: this.props.category
        })
        .then(res => {
          this.setState(
            {
              listitems: res.data,
              setup: 1
            },
            this.updateSiblingArray()
          );
        });
    }
  }
  updateSiblingArray = () => {
    //console.log("uupdatesublei");
    //console.log(this.state.siblingarray);

    this.state.listitems.map(item => {
      this.setState({
        siblingarray: this.state.siblingarray.concat(item.duplicateid)
      });
      if (Array.isArray(item.sub)) {
        {
          item.sub.map(subitem =>
            this.setState({
              siblingarray: this.state.siblingarray.concat(subitem.duplicateid)
            })
          );
        }
      }
    });
  };
  clickHandler = (sup, id) => {
    if (sup === 0) {
      this.setState({
        super: id
      });
    } else {
      this.setState({
        super: sup
      });
    }
  };

  render() {
    //console.log(this.state.siblingarray);
    return (
      <div>
        {this.state.listitems.map(item => {
          {
            if (Array.isArray(item.sub)) {
              //console.log(item.sub);
              //console.log(this.state.siblingarray);
              return (
                <div>
                  <ListItem
                    siblingarray={this.state.siblingarray}
                    marked={this.props.marked}
                    menuAdvPrev={this.props.menuAdvPrev}
                    activeItem={this.props.activeItem}
                    menuClick={this.props.menuClick}
                    categoryCollapse={this.clickHandler}
                    key={item.id}
                    id={item.duplicateid}
                    title={item.title}
                    link={item.link}
                    super={item.super}
                    completed={item.completed}
                    currentSuper={this.state.super}
                    category={this.props.category}
                    text={item.description}
                  />
                  {item.sub.map(subitem => (
                    <ListItem
                      siblingarray={this.state.siblingarray}
                      marked={this.props.marked}
                      menuAdvPrev={this.props.menuAdvPrev}
                      activeItem={this.props.activeItem}
                      menuClick={this.props.menuClick}
                      categoryCollapse={this.clickHandler}
                      key={subitem.id}
                      id={subitem.id}
                      title={subitem.title}
                      link={subitem.link}
                      super={subitem.super}
                      completed={subitem.completed}
                      currentSuper={this.state.super}
                      category={this.props.category}
                      text={subitem.description}
                    />
                  ))}
                </div>
              );
            } else {
              return (
                <ListItem
                  siblingarray={this.state.siblingarray}
                  marked={this.props.marked}
                  menuAdvPrev={this.props.menuAdvPrev}
                  activeItem={this.props.activeItem}
                  menuClick={this.props.menuClick}
                  categoryCollapse={this.clickHandler}
                  id={item.duplicateid}
                  key={item.id}
                  title={item.title}
                  link={item.link}
                  super={item.super}
                  completed={item.completed}
                  currentSuper={this.state.super}
                  category={this.props.category}
                  text={item.description}
                />
              );
            }
          }
        })}
      </div>
    );
  }
}

与更新类别有关的App.js代码：

circleClickHandler = (category, name) => {
    this.setState(
      {
        circleClasses: this.state.circleClasses.concat("hidden"),
        listClasses: this.removeClassFromArray(
          this.state.listClasses,
          "hidden"
        ),
        backArrowClasses: [],
        category: category,
        categoryName: ": " + name
      },
      () =>
        this.setState({
          listClasses: this.state.listClasses.concat("clicked"),
          setup: 1
        })
    );
  };
  backClickHandler = () => {
    this.setState({
      menuClicked: 0,
      list: [],
      listClasses: ["hidden"],
      infoClasses: ["hidden"],
      quizInfoClasses: ["hidden"],
      backArrowClasses: ["hidden"],
      category: 0,
      categoryName: "",
      circleClasses: [],
      infoTitle: "",
      infoText: "",
      infoLink: "",
      siblingarray: [],
      activeItem: 0,
      marked: 0,
      setup: 0
    });
  };
  render() {
    return (
      <div id="App">
        <div id="content-wrap">
          <header className="header">
            <div
              id="back-arrow"
              onClick={this.backClickHandler}
              className={this.state.backArrowClasses.join(" ")}
            >
              &larr;
            </div>
            PO Onboarding Checklist{this.state.categoryName}
          </header>
          <div id="sub-header">
            <p>              
            </p>
          </div>
          <div
            id="circle-container"
            className={this.state.circleClasses.join(" ")}
          >
            <Circle
              percentage="80"
              category="1"
              circleClick={this.circleClickHandler}
            />
            <Circle
              percentage="60"
              category="2"
              circleClick={this.circleClickHandler}
            />
            <Circle
              percentage="95"
              category="3"
              circleClick={this.circleClickHandler}
            />
            <Circle
              percentage="45"
              category="4"
              circleClick={this.circleClickHandler}
            />
            <Circle
              percentage="12"
              category="5"
              circleClick={this.circleClickHandler}
            />
            <Circle
              percentage="20"
              category="6"
              circleClick={this.circleClickHandler}
            />
            <Circle
              percentage="100"
              category="7"
              circleClick={this.circleClickHandler}
            />
            <Circle
              percentage="26"
              category="8"
              circleClick={this.circleClickHandler}
            />
          </div>
          <div
            id="po-onboarding-list-container"
            className={this.state.listClasses.join(" ")}
          >
            <LearningObjectives
              activeItem={this.props.activeItem}
              menuClick={this.props.menuClick}
              categoryCollapse={this.clickHandler}
              id={0}
              title="Learning Objectives"
              super={0}
              completed={1}
              currentSuper={this.state.super}
              category={this.props.category}
              text={"here are your learning objectives"}
            />
            <CategoryList
              setup={this.state.setup}
              activeItem={this.state.activeItem}
              marked={this.state.marked}
              menuAdvPrev={this.menuAdvanceAndPreviousHandler}
              menuClick={this.menuClickHandler}
              category={this.state.category}
            />
            <Quiz
              activeItem={this.state.activeItem}
              quizClick={this.quizClickHandler}
              categoryCollapse={this.menuClickHandler}
              id={"1"}
              completed={1}
              currentSuper={this.state.super}
              category={this.state.category}
            />
          </div>
          <div
            id="po-onboarding-info-container"
            className={this.state.infoClasses}
          >
            <ListInfo
              id={this.state.activeItem}
              title={this.state.infoTitle}
              info={this.state.infoText}
              onClick={this.menuClickHandler}
              link={this.state.infoLink}
              siblingarray={this.state.siblingarray}
              advanceinfo={this.advanceInfo}
              previousinfo={this.previousInfo}
            />
          </div>
          <div
            id="po-onboarding-quiz-container"
            className={this.state.quizInfoClasses}
          >
            <QuizInfo
              id={this.state.activeItem}
              category={this.state.category}
              onClick={this.menuClickHandler}
              advanceinfo={this.advanceInfo}
              previousinfo={this.previousInfo}
            />
          </div>
        </div>
        <div id="footer">
          <p>Logical Integrations, Inc.</p>
        </div>
      </div>
    );
  }

---

因此，基本上，作为一个例子，当我点击一个对应于类别1的圆时，它应该加载同级数组：[2,4,5,6,7,8]，它确实如此！但是，当我单击后退箭头并选择与类别2对应的圆时，它没有用新值更新同级数组，而是保留了[2,4,5,6,7,8]中的旧值。几天来我一直在想如何解决这个问题。任何帮助都将不胜感激。谢谢

伙计们，我真的明白了。嗯，不是很清楚问题发生的原因，而是找到了解决问题的方法。当我点击App.js中的后退箭头时，我基本上不得不重新初始化CategoryList组件。现在一切都好了！如果有人能向我解释为什么它不起作用，否则我还是会非常感激的。多谢各位

与JS中非严格相等的0相比？我看你喜欢过危险的生活。@Clarity哈哈，真是个好主意。这些实际上是我在尝试解决上述问题时添加的最后几行代码。。。在我的沮丧中，我下意识地想自杀：pYou调用this.updateSiblingArray而不是将引用传递给setState，因此它发生在状态更改之前。