как разобрать цикл для json в реакции js

Question

как разобрать цикл для json в реакции js

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>, то вы получите ошибку, с которой вы столкнулись: «Действительный элемент React (или null)». Если вы хотите отобразить несколько элементов, вам нужно их обернуть в div. Подробнее об этом https://facebook.github.io/react/docs/jsx-in-depth.html#jsx-children

1

Он не распознает эти истории, потому что я уверен, что они не определены с самого начала.

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

Другая проблема может быть this.state.roundshistories. Он не определен в вашем примере.

JavaScript, JSON, reactjs, ECMAScript-6,

javascript,json,reactjs,ecmascript-6,

0

Ответов: 2