React js - изменение состояния при клике из массива значений - ошибка «Неперехваченное нарушение инварианта»

Имейте множество вариантов цвета, хотите создать динамический список этих элементов, а затем изменить состояние на выбранный цвет при щелчке.

Вот мой текущий код:

import React from 'react';
import ReactDOM from 'react-dom';

const colors=["white","green","blue", "red", "orange"];

class Grid extends React.Component{

  constructor(props){    
    super(props);
    this.state = {
      color: colors[0]
    };  
  }

  setCurrentColor(setColor){  
    this.setState({
      color: setColor
    });
  }
 
  setColorSelections(){
    const colorItems = colors.map((thecolor) =>
      <li  
      onClick = {(thecolor) => this.setCurrentColor(thecolor)  }
      key = {thecolor} >
      {thecolor}
      </li>
    );
    return(
      <ul>        
        {colorItems}
      </ul>
    ) 
  }
 
  render(){
    return(
      <div> 
        <p>Current selection: {this.state.color}</p>
              {this.setColorSelections()}
      </div>
    )
  }
}

Получение следующей ошибки

Uncaught Invariant Violation: Objects are not valid as a React child

Я действительно не могу вывести состояние? Как это исправить

reactjs

29.05.2019 23:00

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Удалите параметр thecolor из функции onClick или переименуйте его во что-то другое, это выдает ошибку, потому что переменная была объявлена в функции карты map((thecolor)

setColorSelections() {
  const colorItems = colors.map((thecolor) =>
    <li
      onClick = {(event) => this.setCurrentColor(thecolor)}
      key = {thecolor} >
      {thecolor}
    </li>
  );
  return (
    <ul>
      {colorItems}
    </ul>
  )
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id = "root"></div>

<script type = "text/babel">
const colors = ["white", "green", "blue", "red", "orange"];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color: colors[0]
    };
  }

  setCurrentColor(setColor) {
    this.setState({
      color: setColor
    });
  }

  setColorSelections() {
    const colorItems = colors.map((thecolor) =>
      <li
        onClick = {(event) => this.setCurrentColor(thecolor)}
        key = {thecolor} >
        {thecolor}
      </li>
    );
    return (
      <ul>
        {colorItems}
      </ul>
    )
  }
  render() {
    return (
    <div> 
        <p style = {{ backgroundColor: this.state.color }}>Current selection: {this.state.color}</p>
              {this.setColorSelections()}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
</script>

29.05.2019 23:08

Другие вопросы по теме

Реагировать-выбрать ширину опции контейнера

Реагировать groupBy и печатать в таблицу

Не удалось скомпилировать React. Модуль не найден: не удается решить, как скомпилировать с помощью реактивного маршрутизатора?

Я хочу, чтобы мои данные csv построчно отображались в модальном окне, нажав кнопку через сопоставление в реакции

Как сохранить заставку над компонентами React

Как activeClassName работает с компонентом Link?

Изменение состояния класса из импортированной функции в ReactJS

Как подтолкнуть массив к состоянию в React? Получение «Недопустимая попытка распространения неитерируемого экземпляра»

Пара значений ключа сценария Java для объекта

Событие onClick не может сделать тег <li> React

React js - изменение состояния при клике из массива значений - ошибка «Неперехваченное нарушение инварианта»

Ответы 1

Другие вопросы по теме

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