Question

我正在编写一些代码。基本上，当单击按钮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>
...

流量：

ComponentDidMount从我的api的第一个数据中获取值，并将其置于状态（InitialVal）
在渲染中，nowId过滤了id，其中id === this.state.initialVal并显示
在“渲染”中，在NavLink Click上，它更改initialVal（choseSeason函数）的值

一切正常，但是有时单击时（可以在第二次单击或第100次单击之后），按钮将''传递给initialValue，这使我的组件不呈现任何内容。（在下面的图片中，在第10次点击时，它什么也没传递）

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

Answer 1

您可以在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>
    ...

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

1 个答案: