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

Question

let arr = []

class Test extends React.Component {
   handleConvertString = (event) => {
    let str = this.inputRef.value;
    let solutions = ['abb','klopp','lopp','hkhk','g','gh','a'] // Returnsolutions()
    if (solutions.includes(str))
    {
        if (arr.includes(str))
        {
            alert("Answer already found");
        }else{
            arr.push(str)
        }
    }

    }
}

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

В этом фрагменте кода мне нужно получить новое содержимое моего arr (массива) и вернуться и получить доступ к нему за пределами моего класса. Мне также нужно иметь возможность абстрагировать его в другой файл для использования после этого.

Как я могу это сделать?

Answer 1

Есть разные способы сделать это. Здесь вы можете использовать метод props для решения вашей проблемы.

Вы должны передавать значения в качестве props другим компонентам, чтобы получить доступ к значению массива за пределами этого компонента.

Пример ниже поможет вам. Я сделал несколько изменений в вашем коде, чтобы удовлетворить себя. Лог c останется прежним, и вы можете получить от него помощь.

Примечание:

• Я использую жестко закодированное значение str для проверки результата.
• Я использую переменную displayResult и функцию map, чтобы просто отобразить результат. В случае, если конечный массив имеет более одного значения, функция map будет перебирать и добавлять каждое значение массива в переменную displayResult и отображать его. Вы можете избежать этого, так как это написано только для отображения результата.

Из приведенного ниже кода вы можете ясно видеть, как мы передаем значения в другой компонент (снаружи). Точно так же, если вы хотите передать значение в другой файл, вы должны импортировать этот файл и передать значение в качестве подпорки соответствующему компоненту, определенному в этом файле,

let displayResult = "";
function AnotherComponent(props) {
		props.finalArr.map((num, index) => {
    	displayResult = displayResult.concat(num)
		});
  	return (
  	<div>Value of final array is: {displayResult}</div>
    )
 
}


class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = {arr: []};
    this.handleConvertString = this.handleConvertString.bind(this);
  }
  
  handleConvertString(event) {
	  let str = "abb";
    let solutions = ['abb','klopp','lopp','hkhk','g','gh','a'] 
    if (solutions.includes(str)) {
    		let finalArr = this.state.arr;
        if (finalArr.includes(str)) {
            alert("Answer already found");
        }else{
        		finalArr.push(str)
            this.setState({arr: finalArr})
        }
    }
    
  }
  
  render() {
    return (
      <div>
        <button type="button" 
            onClick={this.handleConvertString}>
            Click Me
        </button>
        <AnotherComponent finalArr={this.state.arr}/>
      </div>
    )
  }
}

ReactDOM.render(<Test />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>