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

Question

Допустим, я сопоставляю состояние своего магазина с реквизитом следующим образом:

const mapStateToProps = state => {
    return {
        somelist: state.somelist
    };
};

И мне нужно создать переменные в моем рендере, например:

render() {
  const { somelist } = this.props;
  const somenestedlist = somelist.list;
}

Однако в моем методе рендеринга я также вызываю другой метод, которому нужны те же переменные. Так что я могу либо:

(1) Передайте его из метода рендеринга следующим образом:

render() {
  const { somelist } = this.props;
  const somenestedlist = somelist.list;

  <div onClick={()=>this.someothermethod(somenestedlist)}
}

(2) Переопределите их в someothermethod(), который не СУХОЙ.

(3) Создайте функцию, которая возвращает нужное значение, и вызывайте его везде, где это необходимо, как в:

getList() {
  const { somelist } = this.props;
  const somenestedlist = somelist.list;

  return somenestedlist;
}

ИЛИ есть ли лучший способ, чем любой из этих примеров?

Answer 1

Вы можете создать somelist и somelist.list в объект в mapStateToProps и вернуть объект. Что-то вроде ниже

const mapStateToProps = state => {
    const obj = {};
    obj.somelist = state.somelist;
    obj.someNestedList = state.somelist.list;
    return {
        list: obj
    };
};

А в рендере вы можете получить somelist и someNestedList из объекта props списка без назначения локальной переменной. Что-то вроде ниже

 someothermethod = list => {
      console.log(list.someList);
      console.log("someNestedList", list.someNestedList);
 }
 render() {
      const { list } = this.props;
      console.log("somelist", list.somelist);
      console.log("someNestedList", list.someNestedList);
      return(
         <div onClick={()=>this.someothermethod(list)}></div>
      )
    }

Answer 2

Если вы не хотите переопределять переменные в каждой используемой вами функции, тогда ... Я думаю, что ваш единственный вариант - использовать значение непосредственно из реквизита ...

Затем сделайте это:

yourMethod(){
    //Do somethign with data directly, no need to declare a const again
    this.anotherMethod(this.props.somelist.list);
}

вместо:

const { somelist } = this.props;
const somenestedlist = somelist.list;

Я имею в виду, что значения уже доступны для всех методов, просто используйте их ... const { somelist } = this.props; используется только как помощник, чтобы ненапишите this.props.somelist по всему методу.

Answer 3

Вы можете конвертировать somenestedlist в mapStateToProps:

const mapStateToProps = state => {
    return {
        somelist: state.somelist,
        somenestedlist: state.somelist.list
    };
};

В любом месте вы можете использовать this.props.somenestedlist

Answer 4

Если вам не нужно изменять список, тогда this.props.someList доступен из любого метода класса.

Однако, если вы хотите добавить / удалить элементы из этого списка из компонента без изменения someList, тогда самое простое решение - объявить переменную nestedList из источника someList в классе конструктор (пример ниже, где state = {...}, является синтаксическим сахаром для того же самого), а затем использовать состояние React для изменения этого нового списка.

Теперь вы можете либо отказаться от нового списка, либо вызвать создателя действий Redux, чтобы сохранить и обновить список реквизитов (следовательно, вы также можете сбросить оба списка, если исходный источник списка остается постоянным).

Рабочий пример: https://codesandbox.io/s/6w5r5o32qk

import React, { Component, Fragment } from "react";
import { connect } from "react-redux";
import { resetList, saveList } from "./listActions";

const newData = [
  {
    _id: "5b9c3b351e5f7d9b827df4ce",
    index: 0,
    guid: "048e6f79-c33c-42fc-83e3-05f5b467240d",
    isActive: false,
    balance: "$1,663.79",
    picture: "http://placehold.it/32x32",
    age: 23,
    name: "Tonya Drake"
  },
  {
    _id: "5b9c3b350e7b14d4c94043f2",
    index: 1,
    guid: "1e3daeeb-36fd-4e52-a30e-5dbaedec8438",
    isActive: true,
    balance: "$2,263.69",
    picture: "http://placehold.it/32x32",
    age: 40,
    name: "Patricia Phelps"
  }
];

class Example extends Component {
  state = {
    addButtonClicked: false,
    saveButtonClicked: false,
    nestedList: this.props.someList
  };

  componentDidUpdate = prevProps => {
    if (prevProps.someList !== this.props.someList) {
      this.setState({
        nestedList: this.props.someList
      });
    }
  };

  addData = () => {
    this.setState(prevState => ({
      addButtonClicked: true,
      nestedList: [...this.state.nestedList, newData]
    }));
  };

  resetData = () => {
    this.setState(prevState => {
      this.props.resetList();
      return {
        addButtonClicked: false,
        saveButtonClicked: false,
        nestedList: this.props.someList
      };
    });
  };

  saveNewList = () =>
    this.setState(prevState => {
      this.props.saveList(this.state.nestedList);
      return { saveButtonClicked: true };
    });

  render = () => (
    <div style={{ textAlign: "center" }}>
      <h1>Utilizing React State</h1>
      <button
        className="uk-button uk-button-primary uk-button-large"
        type="button"
        onClick={this.addData}
        disabled={this.state.addButtonClicked || this.state.saveButtonClicked}
        style={{ marginRight: 20 }}
      >
        Add Data
      </button>
      <button
        type="button"
        className="uk-button uk-button-danger uk-button-large"
        onClick={this.resetData}
        disabled={!this.state.addButtonClicked && !this.state.saveButtonClicked}
        style={{ marginRight: 20 }}
      >
        Reset List
      </button>
      <button
        type="button"
        className="uk-button uk-button-secondary uk-button-large"
        onClick={this.saveNewList}
        disabled={
          (this.state.addButtonClicked && this.state.saveButtonClicked) ||
          (!this.state.addButtonClicked && !this.state.saveButtonClicked)
        }
      >
        Save List
      </button>
      <pre style={{ height: 600, overflowY: "auto", textAlign: "left" }}>
        State List&nbsp;
        <code>{JSON.stringify(this.state.nestedList, null, "\t")}</code>
        <br />
        <br />
        Props List&nbsp;
        <code>{JSON.stringify(this.props.someList, null, "\t")}
      

); } экспорт по умолчанию подключиться ( state => ({someList: state.list}), {resetList, saveList} )(Пример);

Answer 5

, если вы хотите использовать переменную в определенном компоненте, вы можете использовать следующие опции:

1.используй реквизит

2.использование состояния

3. объявить переменную внутри вашего компонента

4.используйте хранилище для компонента и объявите переменную внутри хранилища и передайте хранилище вашему компоненту

5 .....

если вы хотите использовать определенную переменную в нескольких компонентах, вы можете использовать следующие опции:

1. объявить родительский или базовый компонент, объявить переменную внутри него и передать его через реквизиты дочернему компоненту

2.Вы можете использовать конкретное хранилище для нескольких компонентов и объявить переменную внутри него

3 ....

но будьте осторожны при использовании переменных в сложных ситуациях, это может легко снизить производительность вашего проекта при неправильном использовании

также вы можете использовать атрибут observable для изменения и порядка автоматического рендеринга