Как присвоить значение выбранному элементу на основе его индекса React?

Question

Ожидаемый эффект: нажмите <li> </ li> -> принять индекс li -> поделиться index и this.state.todos в компоненте clock -> на основе index выбрать элемент из массива -> назначить для выбранного элемент значение, возвращаемое Math.random () ---> выбрать клейкий элемент из массива -> назначить ему другое случайное значение -> щелкнуть по предыдущему элементу ---> отобразить для меня назначенное значение. В консоли у меня от selectState не определено. Когда я переключаюсь между <li>, индекс не меняется. Попросите совета.

this.sate.selec перейти к компоненту 'clock' и присвоить this.state.selectTodo

App

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

    this.state = {
        withInitialTodos: true,
        selec: null,
        todos: [
            {
                time: '00:00:10',
                description: 'Hello'
            },
            {
                time: '00:00:20',
                description: 'World'
            }
        ],
        todo: {
            'time': '00:00:30',
            'description': 'W'
        },
        selectTodo: {
            "times": [{ 'time': '00:00:40' }, { 'time': '00:00:50' }],
            "description": " ytytyty",
            "id": 3,
            "title": "gfgfgfgfgf"
        },
        saveTodo: {
            "time": '03:03:03'
        }
    };
  }

  selectTodo = (index) => {
    this.setState({
      selec: index
    })
  }

  createTodo = (todo) => {
    this.setState({
        withInitialTodos: false,
        todos: [].concat(this.state.todos, this.state.todo),
        selectTodo: {
            ...this.state.selectTodo,
            times: [].concat(
                this.state.selectTodo.times,
                this.state.withInitialTodos ? this.state.todos.map(({ time }) => ({ time })): [],
                {
                  time: this.state.todo.time
                }
            )
        }
    });
  }

  saveTodo = (description) => {
    const todo = {
      description,
      time: '03:03:03'
    };

    const todos = [].concat(this.state.todos, todo);

    this.setState({
      todos
    });
  }

  render() {

    console.log(this.state.todos);
    console.log(this.state.selectTodo);
     console.log(this.state.selec);
     console.log("sdsd " + this.state.todos[this.state.selec])
    return (
      <div>
        <ul>
          {
            this.state.todos
              .map((todo, index) =>
                <Todo
                  key={index}
                  index={index}
                  todo={todo}
                  selectTodo ={this.selectTodo}
                />
              )
          }
        </ul>
        <button onClick={this.createTodo}>Add</button>


        <Clock
          todos={this.state.todos}
          selec={this.state.selec}
        />
      </div>
    );
  }
}

Todo

class Todo extends Component {
  render () {
    {console.log(this.props.todo)};
    return (
      <li onClick={()=> this.props.selectTodo(this.props.index)}>
        {this.props.todo.description}
      </li>
    )
  } 
}

export default Todo;

Часы

class Clock extends Component {
  constructor() {
    super()

    this.state = {
      selectTodo: [],
      clock: Math.random()
    }
  }

    componentDidMount() {
      this.setState({
        selectTodo: this.props.todos[this.props.selec]
      })
  }


  render() {
    return (
      <div>
        {this.state.selectTodo = this.state.clock}
      </div>
    );
  }
}

Демо: https://stackblitz.com/edit/react-pxjzb3

Answer 1

Ваш подход не верен. Вы должны понимать и отделять компоненты в зависимости от их поведения (что они должны делать). И состояние и реквизит передаются сверху вниз. Помня об этом, будет полезно структурировать иерархию компонентов. В этом случае функция selectTodo в компоненте Todo должна добавить случайное значение часов, потому что это наиболее идеальная позиция для этой логики, и часам не нужно ничего знать, если вы хотите отобразить список предыдущих случайных чисел или раз. вам просто нужно передать выбранный компонент, и он будет отображать эту информацию. Вы можете изменить свой код следующим образом:

class App extends React.Component {
  state = {
    todos: [
      { id: 0, times: ["00:00:10"], description: "some desc" },
      { id: 1, times: ["00:00:20"], description: "some desc1" }
    ],
    selectedIndex: null
  };

  createTodo = todo => {
    /** 
     * Create Todo Logic
    */
  }

  selectTodo = index => {
    let newTodos = [...this.state.todos]
    let newTime = Math.random();
    newTodos[index].times.push(newTime);
    this.setState({todos: newTodos, selectedIndex: index});
  }


  render() {
    <div>
      <ul>
        {
          this.state.todos.map((todo, index) => (
            <Todo 
              key={todo.id}
              description={todo}
              onSelectTodo={() => this.selectTodo(index)}
            />
          ))
        }
      </ul>
      <Watch 
        todo={this.state.todos[this.state.selectedIndex]}
      />
    </div>
  }
}

Не стесняйтесь задавать вопросы, если вы здесь ничего не понимаете.