Question

我不知道在渲染器中显示这些条件的方法。什么都没有出现，或者如果我尝试.map，那么它给我错误。

我曾尝试过重构，但提出了相同的方案。我尝试将sampleInfo项分配给新数组，但仍然不知道如何在渲染中仅显示该数组中的一项。

sampleInfo = [
    {
second: 1,
ml: '19ml',
animal: 'Thing1',
weight: '4kg',
capacity: '20ml'
    },

    {
second: 2,
ml: '38ml',
animal: 'Thing2',
weight: '7kg',
capacity: '35ml'
    },

    {
second: 3,
ml: '57ml',
animal: 'Thing3',
weight: '12kg',
capacity: '60ml'
    }

         ]
....Some functions here......

onSubmit(onetotwosec, morethantwosec) {

const {time} = this.state;

    this.setState((state, props) => ({
      scoreArray:state.scoreArray.concat(ms(state.time,{verbose: true})),
      time:0,
      submit:true

    }));

// let myNewanimalArray = state.animalArray.concat({morethantwosec});
// console.log(myNewanimalArray) 
      let filterAnimal = 0
    if((time >= 1000) && (time < 2000)) {
         filterAnimal = this.sampleInfo.filter((item) => {
            return item.second === 1;
        }).map((item) => {
            return item.animal
        });

         console.log(filterAnimal)
        }

        else if(time > 2000) {       
             filterAnimal = this.sampleInfo.filter((item) => {
                return item.second === 2;
            }).map((item) => {
                return item.animal
            });

             console.log(filterAnimal)

     } 
  }
render() {

    if((this.state.isOn) === true){

    return(

      <React.Fragment>

      <div>
        <h3>Timer:{ms(this.state.time,{verbose: true})}</h3>
      </div>
    <div>
      <button onMouseDown={this.onItemMouseDown} onMouseUp={this.onItemMouseUp}>start</button>   
      </div>
      <div>
        <ul>
          {this.state.scoreArray.map(function(item,i){

            return<li key={i}>{item}</li>
            })}
        </ul>
      </div>
      </React.Fragment>
    ) 

    } else if ((this.state.isOn) === false){  

      return(

        <React.Fragment>

      <div>

        <h3>Timer:{ms(this.state.time)}</h3>

      </div>

      <div>

      <button onMouseDown={this.onItemMouseDown} onMouseUp={this.onItemMouseUp}>Start</button><span></span> 

      <button onClick={this.resetTimer}>Reset</button>
<span></span>

      <button onClick={this.onSubmit}>Done!</button>

      </div>      

      <div>

        <ul>

        {this.state.scoreArray.map(function(item,i){

          return<li key={i}>{item}</li>

          })}

        </ul>
    //Here I've tried .map like above but can't figure out what to put!!!!
      </div>


      </React.Fragment>

我想要完成！按钮，当计时器达到特定时间时，显示来自sampleInfo数组的匹配动物。如果计时器介于1到2秒之间，它应该以“ Thing 1”之类的文字显示每个项目。我可以使用控制台将其正确显示，但是我一生都无法考虑如何将其放入渲染。所有功能都在一个类之内。

Answer 1

我自己进行了管理（在google和上述所有工具的帮助下-我花了3天的时间来做这样简单的事情），以下是onSubmit函数的更新：

 onSubmit() {
    this.setState((state) => ({
        scoreArray:state.scoreArray.concat(ms(state.time,{verbose: true})),
        time:0,
        submit:true

      }));

const {time} = this.state;


    var filterAnimal
    if((time >= 1000) && (time < 2000)) {
         filterAnimal = this.sampleInfo.filter((item) => {
            return item.second === 1;
        }).map((item) => {
            return item.animal
        }).toString()


         this.setState(prevState => ({
           animalArray:[filterAnimal,...prevState.animalArray ]})
           )

        }

在渲染中：

{this.state.animalArray}

工作正常。如果有人看到此问题，请发表评论。

如何在渲染中显示此数组中的一项？

1 个答案: