@AsdfAsdfSK

Передача нового массива для каждого компонента?

Добрый вечер! Некоторое время назад начал изучать React ,и заодно решил сделать пару проектиков,для закрепления навыков.Пишу в данный момент что-то наподобие клона trello.5d26191a148f1149989114.jpeg
Вот так вот выглядит интерфейс без CSS'a.
Проблема заключается в следующем:
У меня есть компонент,который создаёт таски.Внутри этих тасок я создаю какие-либо мини таски.
Работает это следующим образом:
У меня есть массив,который я заполняю введенными в input значениями. Таким образом я создаю таску с таким названием,какое я ввёл в поле.Однако когда я реализовал мини таски,то в них стал попадать ВЕСЬ массив и распространяться на компоненты верхнего уровня,то есть обычные таски.(например на скрине я лишь 1 раз написал дату(14:00),а она отобразилась во всех созданных мною тасках.
Собственно сюда я и решился написать,дабы получить совет,как исправить это.
Из личных идей я могу только предположить,что подъем состояния может помочь,но я не один и не два раза перечитал статью по этой теме в офф документации и просто запутался.
Исходный код:
import React,{Component} from 'react'
import Form from "react-bootstrap/Form";
import Card from "react-bootstrap/Card";
import FormCheckInput from "react-bootstrap/es/FormCheckInput";
import Button from "react-bootstrap/Button";
import WasCreatedTask from "./WasCreatedTask";



const arrayTitleTask=[]

class Shablon extends Component{
    state={
        startValue:"",
        copyValue:this.value
    }
    render(){

        const value=this.state.copyValue
        const fullTasks=arrayTitleTask.map(value=>
            <WasCreatedTask tasks={value}/>
        )
        return(

                <Card>
                    <Card.Title>
                        <h1>Create Your Tasks</h1>
                    </Card.Title>
                    <input onChange={this.handleChange} value={value}/>

                    <Button onClick={this.handleClick}>Submit</Button>
                    {fullTasks}
                </Card>




        )
    }
    handleChange=(event)=>{
        this.setState({
            startValue:event.target.value,
            copyValue:this.startValue,
            
        })
    }

   handleClick=()=>{
      this.setState({
       copyValue:"",
        startValue:""
      })
       if(this.state.startValue!==""){
           arrayTitleTask.push(this.state.startValue);
           console.log(arrayTitleTask)
       }



   }
}


export default Shablon

^Компонент,который рендерит таски.

import React,{Component} from 'react'
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import FormCheckLabel from "react-bootstrap/es/FormCheckLabel";
import AddTaskList from "./AddTaskList";



const miniTasksArray=[]
class WasCreatedTask extends Component{
    state={
        startValue:"",
        copyValue:this.value
    }
    render(){

        const value=this.state.copyValue
        const label=miniTasksArray.map(value=>
            <AddTaskList addMiniTasks={value}/>
        )
        return(
            <Card>
                <Card.Title>
                    <h1> {this.props.tasks}</h1>
                </Card.Title>
                <input onChange={this.handleChange}value={value}/>
                <Card.Text>
                    {label}
                </Card.Text>
                <Button onClick={this.handleClick}>add event</Button>
            </Card>

        )
    }
    handleClick=()=>{
        this.setState({
            copyValue:"",
            startValue:""
        })
        miniTasksArray.push(this.state.startValue)

    }
    handleChange=(event)=>{
        this.setState({
            startValue:event.target.value,
            copyValue:this.startValue,
        })

    }
}

export default WasCreatedTask

^Компонент,который рендерит мини-таски(в нём и есть проблема,на мой взгляд)
import React,{Component} from 'react'
import FormCheckLabel from "react-bootstrap/es/FormCheckLabel";


class AddTaskList extends Component{
    render(){
        return(
            <h2> {this.props.addMiniTasks}</h2>
        )
    }
}



export default AddTaskList

^Компонент,который рендерит одну мини таску(после чего я в компоненте WasCreatedTask рендерю все через функцию map).
Быть может я запутался,быть может мне лень,быть может не хватает знаний,что очевидно. Однако решить задачу я пока что не могу,посему обращаюсь за советом к более опытным людям.
Заранее спасибо
  • Вопрос задан
  • 82 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
1. Убирайте массивы arrayTitleTask и miniTasksArray. Работайте с состоянием компонентов.
2. У каждой titleTask должен быть свой массив miniTasks.
3. Почитайте про иммутабельность и иммутабельное обновление состояния.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы