Respostas:
this.state.myArray.push('new value')
retorna o comprimento da matriz estendida, em vez da própria matriz. Array.prototype.push () .
Eu acho que você espera que o valor retornado seja a matriz.
Parece que é mais o comportamento de React:
NUNCA modifique this.state diretamente, pois chamar setState () depois pode substituir a mutação que você fez. Trate this.state como se fosse imutável. React.Component .
Eu acho que você faria assim (não estou familiarizado com React):
var joined = this.state.myArray.concat('new value');
this.setState({ myArray: joined })
setState()
enfileira as alterações no estado do componente e informa ao React que esse componente e seus filhos precisam ser renderizados novamente com o estado atualizado. Acho que não foi atualizado naquele momento, logo após configurá-lo. Você poderia postar um exemplo de código, onde possamos ver qual ponto você está configurando e registrando, por favor?
.concat('new value');
deveria ser .concat(['new value']);
concat()
método. Veja: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… ( Matrizes e / ou valores para concatenar em uma nova matriz. )
Usando es6, pode ser feito assim:
this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value
this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array
this.props
e this.state
pode ser atualizado de forma assíncrona, você não deve confiar em seus valores para calcular o próximo estado." No caso de modificar uma matriz, uma vez que a matriz já existe como uma propriedade de this.state
e você precisa referenciar seu valor para definir um novo valor, você deve usar a forma de setState()
que aceita uma função com o estado anterior como argumento. Exemplo: this.setState(prevState => ({ myArray: [...this.state.myArray, 'new value'] }));
Veja: reactjs.org/docs/…
Nunca recomendado para alterar o estado diretamente.
A abordagem recomendada em versões posteriores do React é usar uma função de atualização ao modificar estados para evitar condições de corrida:
Empurre a string para o final da matriz
this.setState(prevState => ({
myArray: [...prevState.myArray, "new value"]
}))
Empurre a string para o início da matriz
this.setState(prevState => ({
myArray: ["new value", ...prevState.myArray]
}))
Empurre o objeto para o final da matriz
this.setState(prevState => ({
myArray: [...prevState.myArray, {"name": "object"}]
}))
Empurre o objeto para o início da matriz
this.setState(prevState => ({
myArray: [ {"name": "object"}, ...prevState.myArray]
}))
this.setState((prevState) => ({ myArray: [values, ...prevState.myArray], }));
Você não deveria operar o estado de forma alguma. Pelo menos não diretamente. Se você quiser atualizar seu array, você vai querer fazer algo assim.
var newStateArray = this.state.myArray.slice();
newStateArray.push('new value');
this.setState(myArray: newStateArray);
Trabalhar no objeto de estado diretamente não é desejável. Você também pode dar uma olhada nos ajudantes de imutabilidade do React.
.slice()
para criar um novo array e preservar a imutabilidade. Obrigado pela ajuda.
Você pode usar o .concat
método para criar uma cópia de sua matriz com novos dados:
this.setState({ myArray: this.state.myArray.concat('new value') })
Mas cuidado com o comportamento especial do .concat
método ao passar matrizes - [1, 2].concat(['foo', 3], 'bar')
resultará em [1, 2, 'foo', 3, 'bar']
.
Este Código funciona para mim:
fetch('http://localhost:8080')
.then(response => response.json())
.then(json => {
this.setState({mystate: this.state.mystate.push.apply(this.state.mystate, json)})
})
fetch(`api.openweathermap.org/data/2.5/forecast?q=${this.searchBox.value + KEY} `) .then( response => response.json() ) .then( data => { this.setState({ reports: this.state.reports.push.apply(this.state.reports, data.list)}); });
this.state = { reports=[] }
... por favor, gostaria de saber o que estou fazendo de errado
se você também quiser que sua UI (ou seja, sua flatList) esteja atualizada, use PrevState: no exemplo abaixo, se o usuário clicar no botão, ele adicionará um novo objeto à lista (tanto no modelo quanto na UI )
data: ['shopping','reading'] // declared in constructor
onPress={() => {this.setState((prevState, props) => {
return {data: [new obj].concat(prevState.data) };
})}}.
Da seguinte forma, podemos verificar e atualizar os objetos
this.setState(prevState => ({
Chart: this.state.Chart.length !== 0 ? [...prevState.Chart,data[data.length - 1]] : data
}));
Aqui você não pode empurrar o objeto para uma matriz de estado como esta. Você pode empurrar como seu caminho na matriz normal. Aqui você deve definir o estado,
this.setState({
myArray: [...this.state.myArray, 'new value']
})
Se você está apenas tentando atualizar o estado assim
handleClick() {
this.setState(
{myprop: this.state.myprop +1}
})
}
Considere esta abordagem
handleClick() {
this.setState(prevState => {
return {
count: prevState.count + 1
}
})
}
Basicamente, prevState está escrevendo this.state para nós.
console.log(this.state.myArray)
, é sempre um atrás. Alguma ideia do porquê?