setState 函数在 componentDidMount 内部调用时不起作用

Question

我将 json 文件导入到我的 React 应用程序中以获取数据，并使用 setState 函数，如下面的代码所示

import ruleSets from './db.json'
class App extends React.Component{
  componentDidMount(){
    ruleSets.map((element)=>{
      if(element.phase ==="post_auth"){
        this.setState({
          postAuthRuleSets: element,
        })
      }
      else if(element.phase === "pre_auth"){
        this.setState({
          preAuthRuleSets:element
        })
      }
    })
  }


  constructor(props,context){
    super(props,context);
    this.state={
      postAuthRuleSets:null,
      preAuthRuleSets:null
    }
  }

  render(){
    return(
    <div>
      <h1>hello</h1>
    {this.postAuthRuleSets.rules?.length>0 ? 
    this.postAuthRuleSets.rules.map((element) => <h1> {element.id}</h1>):
    <h1>not fetching data</h1>}
    </div>)
  }
}
export default App;

但是控制台中显示错误，因为我循环的变量指向 null，这意味着 setState 不起作用。

我该怎么办？

Answer 1

componentDidMount(){
  ruleSets.map((element)=>{
    if(element.phase ==="post_auth"){
      this.setState({
        postAuthRuleSets: element,
      })
    }
    else if(element.phase === "pre_auth"){
      this.setState({
        preAuthRuleSets:element
      })
    }
  })
}

您重复设置状态，并且每次将状态设置为单个元素。哪个元素恰好是最后一个将是状态。

我认为您想要做的是创建一个数组，并将状态设置为该数组：

componentDidMount() {
  const postAuthRuleSets = ruleSets.filter(element => {
    return element.phase === "post_auth"
  });
  const preAuthRuleSets = ruleSets.filter(element => {
    return element.phase === "pre_auth"
  });
  this.setState({
    postAuthRuleSets,
    preAuthRuleSets
  });
}

P.s，因为这都是同步的，所以你可以在构造函数中完成它，而不必渲染两次：

constructor(props, context) {
  super(props, context);

  const postAuthRuleSets = ruleSets.filter((element) => {
    return element.phase === "post_auth";
  });
  const preAuthRuleSets = ruleSets.filter((element) => {
    return element.phase === "pre_auth";
  });

  this.state = {
    postAuthRuleSets,
    preAuthRuleSets,
  };
}

// No componentDidMount