如何在反应js中解析json的循环

Question

我是新来的反应。

    this.state = { histories: [
                   {
                  "qas":[
                    {"question": "hi1", "answer": "hello1"},
                    {"question": "hi2", "answer": "hello2"}

                  ]
                }
              ] };
render(){
    return ( 
      <div>
          <History 
          histories={this.state.histories} />
      </div>
    );
  }

在单独的组件页面中，我想使用react js通过循环或地图来呈现问答，但是我尝试了地图，它无法识别地图。我试过for循环，但它没有从中获取子属性。

   const history = ({histories}) => { 
     return(
          <div>
              {histories[0].qas[0].question}
          </div>
          <div}>
            {histories[0].qas[0].answer}
          </div>
      );
}

Answer 1

这是一个地图的例子，希望对你有所帮助。

const History = ({histories}) => {
  // Quick, hacky way to set key.
  // More on keys in React https://facebook.github.io/react/docs/lists-and-keys.html#keys
  let key = 1;
  const questionsAndAnswers = histories[0].qas.map(child =>
    <div key={key++}>
      <div>{child.question}</div>
      <div>{child.answer}</div>
    </div>
  );

  return (
    <div>{questionsAndAnswers}</div>
  );
};

class Histories extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      histories: [
        {
          "qas":[
            {"question": "hi1", "answer": "hello1"},
            {"question": "hi2", "answer": "hello2"}
          ]
        }
      ]
    };
  }

  render() {
      return(
        <div>
          <History histories={this.state.histories}/>
        </div>
      )
    }
}

ReactDOM.render(
  <Histories/>,
  document.getElementById("history")
);

<div id="history"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

如果您从<div>{questionsAndAnswers}</div> 中删除“div”，那么您将收到您遇到的错误“A valid React element (or null)...”。如果要渲染多个元素，则需要将它们包装在 div 中。更多关于这个https://facebook.github.io/react/docs/jsx-in-depth.html#jsx-children

Answer 2

它无法识别这些历史，因为我敢打赌它们在你开始时是未定义的。

const history = ({histories}) => {
  if (!histories || histories.length < 1) return (<div>nothing</div>);
  return histories.map(v => (<div>JSON.stringify(v)</div>))
}

另一个问题可能是this.state.roundshistories。在您的示例中未定义。