Как произвести рендер для dom-елементов в react?

Question

[Артем Рассадин]

Доброго времени суток! Я делаю pet-проект, погода. Мне захотелось сделать так, чтобы при изменении погоды, задний фон соответствовал погоде. Допустим во время дождя, на фоне капают капли и т.п.
В коде я рендерю позиции капли, затем присваиваю их к элементу.

let array = []
const Home = (props) => {
  const weatherParts = 500
  const { activeWeatherForecast } = useSelector(state => state.currentWeekday)

  React.useEffect(() => {
    for (let i = 0; i < weatherParts; i++) {
      array.push([renderPositionY(), renderPositionX()])
    }
  }, [activeWeatherForecast])

  const renderPositionX = () => {
    return Math.floor(Math.random() * document.body.clientWidth)
  }

  const renderPositionY = () => {
    return Math.floor(Math.random() * document.body.clientHeight)
  }
  ...
  {array.length > 0 && array.map(elem => {
            return <div className={s.weatherParts} style={{ top: `${elem[0]}px`, left: `${elem[1]}px` }}></div>
   })}
}

Проблема в том, что элемент не отображается. В DOM-дереве не происходит ни одного рендера
Возможно есть другие варианты рендера, если да, то предложите, пожалуйста.

Answer 1

[Владимир]

Документацию прочитайте, вы похоже ее не открывали. Сначала читаем, желательно полностью, потом пишем, само оно никак не получится.
https://reactjs.org/docs/getting-started.html

Comments

[Артем Рассадин]

Нет, документацию я поверхностно прочитал. Я знаю, что элементы прежде чем добавиться в dom-дерево, преобразуются в объект и потом react их рендерит. Дело в том, что я не знаю, по какой причине react в данном случае не производит рендера объекта

[Владимир]

Артем Рассадин, У вас не рендерится потому что вы поверхностно прочитали документацию. Читайте не поверхностно, то что вы написали это не реакт компонент, это чепуха какаято с включениями реакта.
Я вижу у вас вкрапления редакса, хотя вы даже с пропсами и со стейтом не разобрались.
Начните с азов и усложняйте потихоньку, или откажитесь от реакта

[Артем Рассадин]

Владимир, Спасибо большое за ответ, я скинул только часть кода вероятно поэтому Вы не увидели структуру react компонента. Я прочитал статью из документации про lists and keys и понял в чем была ошибка. Спасибо за то, что не ответили, а дали возможность разобраться самостоятельно

[Владимир]

Артем Рассадин, Ну тоесть ты продолжаешь рендерить из глобальной переменной а не из пропсов или из стейта?

[Артем Рассадин]

Владимир, нет. Я занес массив в компонент. Если есть возможность, просмотрите структуру компонента, пожалуйста.

const Home = (props) => {
  const dispatch = useDispatch()
  const { isLoading } = useSelector(state => state.currentWeather)
  const { activeWeatherForecast } = useSelector(state => state.currentWeekday)
  const weatherParts = 500
  let weatherPart = []

  React.useEffect(() => {
    dispatch(fetchCurrentWeather())
  }, [])

   for (let i = 0; i < weatherParts; i++) {
      weatherPart.push([renderPositionY(), renderPositionX()])
   }

  const getParts = () => {
    return (<div className={s.weatherWrapper}>{weatherPart.map(elem => {
      return (<div className={s.weatherParts} style={{
        top: `${elem[0]}px`,
        left: `${elem[1]}px`,
        position: "absolute",
        background: '#a6a5ff',
        width: '1px',
        height: '15px',
        transform: 'rotate(25deg)'
      }}></div>)
    })}</div>)
  }

  return (
    <div>
      {isLoading ? <div className={s.loading}>Loading...</div> : (<div>
        <div>
          {weatherPart.length > 0 && getParts()}
        </div>
        <div className={s.mainLine}>
          <ThisDay />
          <ThisDayInfo />
        </div>
        <Tabs />
        <Days />
      </div>)}
    </div>
  )
}

export default Home

[Владимир]

Артем Рассадин,
Так и не хочешь почитать?
1) У тебя в прошлый раз weatherPart обновлялось с каждым обновлением погоды, сейчас оно у тебя будет обновлятся один раз, при монтировании компонента
2) Почитай про key