Компоненты реагируют не рендеринг, несмотря на наличие ключевого свойства

Question

Я довольно новичок в React, и это мой первый проект с Redux.

Я получаю некоторые данные и устанавливаю их в дереве состояний.Когда мой редуктор ADD_PRODUCTS_TO_CART работает, мой Products->render() работает, но Product->render() не работает, несмотря на наличие ключа.

Вот суть, это было самое основное, к чему я мог привести.Надеюсь, это имеет смысл, я включил файл, который представляет состояние дерева, чтобы вы могли видеть структуру данных.

https://gist.github.com/hoodweb/e4005e4f1fc95682d4dd9bf87b81fe39

TLDR: В основном акции уменьшаются в государственном дереве, но не отображаются.Что я делаю не так?

Обновление: Я вставил console.log() во все методы рендеринга, чтобы увидеть, что вызывается.Когда я уменьшаю запас моего продукта, продукт не называется.Это, скорее всего, из-за .map(() => <Product/>), который я делаю.Я попытался изменить свое свойство key={}, чтобы оно включало акции следующим образом:

.map((obj) => <Product key={obj.ID.toString() + obj.Stock.toString()} data={obj} />)

, что, кажется, работает.Но я знаю, насколько это стабильно.

Update2: Кажется, что если я возьму свое свойство data={} и поместу его в отдельные свойства, подобные этому <Product key={obj.ID} stock={obj.Stock} title={obj.Title} price={obj.Price} beforePrice={obj.BeforePrice}, оно будет работать.Так что это мое решение на данный момент.

Answer 1

Как сказал @kiarashws, всякий раз, когда вы return false используете свой render() метод, он не рендерится.Удостоверьтесь, что не рендеритесь только тогда, когда вы не хотите.

Обычно видят код, подобный этому:

render() {
   if (props.shouldNotRender) 
      return null or false;

   return <div>
      ...
   </div>
}

Answer 2

В render функция Product вы получили:

if (data.Variations) { //TODO: Variation logic
    return false;
}

Поскольку в data вы получили Variations параметр, он проходит через эту область (потому что Variations не null или undefined) и возвращает ноль вместо компонента рендеринга.

удалите return false, и ваш код должен работать нормально.