时间戳

首页 > 解决方案 > React Axios：有时状态不传递 onClick 事件

reactjs - React Axios：有时状态不传递 onClick 事件

问题描述

我正在处理一些代码。基本上，当单击按钮 1 (id=1) 时，它会显示其值（其中 id===1）。单击按钮 2 时，它会显示按钮“2”的值，等等 代码工作正常。

    constructor(props) {
        super(props);
        this.state = {
            collections: [],
            collection: [],
            initialVal: [],
    };

    choseSeason = event => {
        // console.log(event.target.id);
        this.setState({
            initialVal: event.target.id,
        }, () => console.log('initialVal: '+this.state.initialVal));
    }

    componentDidMount() {
    axios.get(`https://myapi`)
      .then(res => {
        const collections = res.data;
        this.setState({
            collections,
        collection: collections.map(collection=>(collection)),
        //this is console log line 29
        initialVal: collections[0].id,
         });
      })
  }
render() {
    const { collections = [] } = this.state;
    const collection = this.state;
    const nowId = collections.filter(collection => collection.id === this.state.initialVal);   
    console.log(nowId); //this is console log line 56
    return (
        <Container className="collection">

                <div className="">
                    {collections.length ? collections.map(c=>(
                            <div className="nav"><NavLink activeClassName={"active3"} onClick={this.choseSeason}><span id={c.id}>{'SS'+c.name.slice(7, 9)}</span></NavLink></div>
                        ))
                    :
                    <React.Fragment/>
                    }
                </div>

           {nowId.length ? 

            <div className="wrapper">

                <div className="item1 flex">

                <div className="flex right">
                    <div className="title vBot">
                        {nowId[0].collection_titles[0].title}
                    </div>
                </div>
...

流动：

  1. ComponentDidMount 从我的 api 的第一个数据中获取值，并将其置于状态 (InitialVal)

  2. 在 Render 中，nowId 过滤了 id === this.state.initialVal 的 id 并显示它

  3. 在 Render 中，在 NavLink Click 上，它会更改 initialVal 的值（chooseSeason 函数）

一切正常，但有时在单击时（可以在第二次单击或第 100 次单击之后），按钮将 '' 传递给 initialValue，这使我的组件什么也不渲染。（在下图中，第 10 次点击，它没有通过）

图片形式console.log()

这与我的逻辑/语法有什么关系吗？请帮忙！谢谢你！

标签： reactjsaxiosstate

解决方案

您可以在 selectedSeason 方法中传递 id 并更新状态

        constructor(props) {
      super(props);
      this.state = {
          collections: [],
          collection: [],
          initialVal: [],
    };

    choseSeason = id => {
      // console.log(id);
      this.setState({
          initialVal: id,
      }, () => console.log('initialVal: '+this.state.initialVal));
    }

    componentDidMount() {
    axios.get(`https://myapi`)
    .then(res => {
      const collections = res.data;
      this.setState({
          collections,
      collection: collections.map(collection=>(collection)),
      //this is console log line 29
      initialVal: collections[0].id,
      });
    })
    }
    render() {
    const { collections = [] } = this.state;
    const collection = this.state;
    const nowId = collections.filter(collection => collection.id === 
    this.state.initialVal);   
    console.log(nowId); //this is console log line 56
    return (
      <Container className="collection">

              <div className="">
                  {collections.length ? collections.map(c=>(
                          <div className="nav"><NavLink activeClassName={"active3"} onClick={()=>this.choseSeason(c.id)}><span id={c.id}>{'SS'+c.name.slice(7, 9)}</span></NavLink></div>
                      ))
                  :
                  <React.Fragment/>
                  }
              </div>

        {nowId.length ? 

          <div className="wrapper">

              <div className="item1 flex">

              <div className="flex right">
                  <div className="title vBot">
                      {nowId[0].collection_titles[0].title}
                  </div>
              </div>
    ...

推荐阅读