Question

我正在从琐事应用程序中获取一些信息并分别设置我的状态。

console.log(this.state.wrongAnswers[this.state.random]);

注意：问题是一个字符串，答案也是如此，但是错误的答案是一个数组。

每当我尝试在我的jsx代码中呈现错误的答案时，数据便会按应显示的方式显示。但是，每当我尝试访问索引或映射数组的元素时，都会收到一条错误消息，指出其未定义。我想可能与事实有关，因为我将数据同步在componentDidmount中，因此我检查了render方法以查看显示的内容。

               {this.state.wrongAnswers[this.state.random].map((wrongAnswer, index) => {
  <p key={'Key-'+index}>{wrongAnswer}</p>
      })}
     <form action="">
     <input type="radio" name="gender" value={wrongAnswer} /> 
   Male<br/>
     <input type="radio" name="gender" value={wrongAnswer}/> 
   Female<br/>
     <input type="radio" name="gender" value={wrongAnswer}/> 
   Other<br/>
     </form>

我没有定义第一个渲染，但是从那以后，每次UI更新时，我都会显示正确的数组，如果我将其放入我的jsx代码中，则该数组也会像应有的那样显示。

但是我想将错误的答案映射到诸如此类的单选按钮

#include <stdio.h>



int main ()
{
    int x = 0;
    int max = 0;
    int max2 = 0;
    int flag = 0; 

 do
 {
     printf("Enter the number  -999 to stop: ");
     scanf("%d", &x);
     if (x != -999)
     {   // bigger than max?
         if (x > max)
         {   
             // since the new max is x and the old max is bigger than max2
             max2 = max;
             max = x;     
         }
         // bigger than max2?
         else if (x > max2)
         {   
            max2 = x;
         }

     }
     else // exit loop
     {
         flag = 1;
     }
    }
 while (flag == 0);
 printf("The max number is: %d\n", max);
 printf("The second max number is: %d\n", max2);

 return 0;
}

Answer 1

首先，我建议您先合并您的状态，然后再调用一次setState（）。想象一下，如果您的数量为50，那么您的应用将在显示最终结果之前进行50次自我更新。

在从状态中渲染数据之前，要给第二条建议加上条件，以确保在渲染时状态列表未定义。

class Component React.Component {
  state= {
    random: someValue,
    questions: [],
    answers: [],
    wrongAnswers: []
  }

  componentDidMount() {
    // Your api logic
    // merge and prepare new state object before calling this.setState() !!
    const newObject = mergeLogic();
    // then setState to execute update just once
    this.setState({wrongAnswers: newObject})
  }

  render() {
    const {random, wrongAnswers } = this.state;

    return (
      {wrongAnswers && wrongAnswers[random].map((wrongAnswer, index) => {
        <p key={'Key-'+index}>{wrongAnswer}</p>
      })}

     // your other code...
    );
  }
}

无法在ReactJS状态下访问数组的索引

1 个答案: