Элементы не отображаются в React [duplicate]

var myArray = [
    {field: 'id', operator: 'eq', value: 'id'}, 
    {field: 'cStatus', operator: 'eq', value: 'cStatus'}, 
    {field: 'money', operator: 'eq', value: 'money'}
];
var newArray = _.remove(myArray, function(n) {
  return n.value === 'money';;
});
console.log('Array');
console.log(myArray);
console.log('New Array');
console.log(newArray);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js"></script>

4
задан Mayank Shukla 25 February 2018 в 06:55
поделиться

2 ответа

Поскольку вы ничего не возвращаете из метода renderKeywords, вы возвращаетесь только из тела карты. Если вы ничего не возвращаете из функции, то по умолчанию она вернет undefined, вам нужно вернуть результат карты (массив элементов).

Нравится это:

renderKeywords() {
    return this.state.question.map((item, key) => {   //here
        return (
            <span key={key}> {item} </span>
        );
    }); 
}

Короче говоря, вы можете записать это следующим образом:

renderKeywords() {
   return this.state.question.map((item, key) => <span key={key}> {item} </span> ); 
}

Предложение:

Назначить уникальную клавишу для каждого элемента.

Проверьте этот ответ для получения дополнительной информации о ключе: Понимание уникальных ключей для дочерних элементов массива в React.js

9
ответ дан Mayank Shukla 16 August 2018 в 05:37
поделиться

вы должны вернуть функцию самой карты, и вы можете достичь ее с помощью специальных функций стрелок es6

class Application extends React.Component {
  constructor(){
    super();

    this.state = {
      questionAnswer: 'is that possible',
      question: ['is', 'possible', 'that']
    }  
  }

  renderKeywords() {
    return this.state.question.map((item, i) =><span key={i}>{item}
   </span>}); 
  }

  render() {
    return (
      <div>
        <div>blabla</div>
        {this.renderKeywords()}  
      </div>
   );
 }
}
React.render(<Application />, document.getElementById('app'));
0
ответ дан hannad rehman 16 August 2018 в 05:37
поделиться
  • 1
    Ваш ответ не привнесет ничего нового в вопрос и в основном просто повторяет уже принятый ответ ... – Marek Takac 14 August 2017 в 09:06
  • 2
    Я обновил функцию стрелки es6, которая является фактической ее реализацией, когда вы прямо возвращаете что-то из нее. @MarekTakac – hannad rehman 14 August 2017 в 09:46
Другие вопросы по тегам:

Похожие вопросы: