Как вставить элемент в массив useState React Hook? Это как старый метод в состоянии реакции? Или что-то новенькое?
Например. Пример push setState?
Как вставить элемент в массив useState React Hook? Это как старый метод в состоянии реакции? Или что-то новенькое?
Например. Пример push setState?
При использовании useState
можно получить метод обновления для элемента состояния:
const [theArray, setTheArray] = useState(initialArray);
затем, когда вы хотите добавить новый элемент, вы используете эту функцию и передаете новый массив или функцию, которая создаст новый массив. Обычно последнее, поскольку обновления состояния являются асинхронными и иногда пакетными:
setTheArray(oldArray => [...oldArray, newElement]);
Иногда можно обойтись без этой формы обратного вызова, если вы только обновляете массив в обработчиках для определенных конкретных пользовательских событий, таких как click
(но не как mousemove
):
setTheArray([...theArray, newElement]);
События, для которых React гарантирует, что рендеринг сброшен, - это дискретные события, перечисленные в здесь.
Живой пример (передача обратного вызова в setTheArray
):
const {useState, useCallback} = React;
function Example() {
const [theArray, setTheArray] = useState([]);
const addEntryClick = () => {
setTheArray(oldArray => [...oldArray, `Entry ${oldArray.length}`]);
};
return [
<input type="button" onClick={addEntryClick} value="Add" />,
<div>{theArray.map(entry =>
<div>{entry}</div>
)}
</div>
];
}
ReactDOM.render(
<Example />,
document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
Поскольку единственное обновление для theArray
в этом случае есть в событии click
(одно из дискретных событий), я мог бы обойтись прямым обновлением в addEntry
:
const {useState, useCallback} = React;
function Example() {
const [theArray, setTheArray] = useState([]);
const addEntryClick = () => {
setTheArray([...theArray, `Entry ${theArray.length}`]);
};
return [
<input type="button" onClick={addEntryClick} value="Add" />,
<div>{theArray.map(entry =>
<div>{entry}</div>
)}
</div>
];
}
ReactDOM.render(
<Example />,
document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
setTheArray(currentArray => [...currentArray, newElement])
, если вышеуказанное не работает. Скорее всего, в useEffect(...theArray..., [])
важно понимать, что theArray
является константой, поэтому функциональные обновления необходимы для значений из будущих рендеров
- person Aprillion; 08.08.2019
useEffect
примером ...?
- person T.J. Crowder; 09.08.2019
useEffect
имеет пустой список зависимостей []
, он будет выполнен только во время первого рендеринга. Таким образом, значение theArray
внутри эффекта всегда будет initialArray
. В ситуациях, когда setTheArray([...initialArray, newElement])
не имеет смысла, и когда константа theArray
всегда будет равна initialValue
, необходимы функциональные обновления.
- person Aprillion; 09.08.2019
Чтобы продолжить, вот несколько общих примеров. Начиная с:
const [theArray, setTheArray] = useState(initialArray);
const [theObject, setTheObject] = useState(initialObject);
Вставить элемент в конец массива
setTheArray(prevArray => [...prevArray, newValue])
Вставить / обновить элемент в конце объекта
setTheObject(prevState => ({ ...prevState, currentOrNewKey: newValue}));
Вставить / обновить элемент в конце массива объектов
setTheArray(prevState => [...prevState, {currentOrNewKey: newValue}]);
Вставить элемент в конец объекта массивов
let specificArrayInObject = theObject.array.slice();
specificArrayInObject.push(newValue);
const newObj = { ...theObject, [event.target.name]: specificArrayInObject };
theObject(newObj);
Вот и несколько рабочих примеров. https://codesandbox.io/s/reacthooks-push-k9k5i?file=/src/index.js
Вы можете добавить массив данных в конце настраиваемого состояния:
const [vehicleData, setVehicleData] = React.useState<any[]>([]);
setVehicleData(old => [...old, ...newArrayData]);
Например, ниже вы видите пример аксиомов:
useEffect(() => {
const fetchData = async () => {
const result = await axios(
{
url: `http://localhost:4000/api/vehicle?page=${page + 1}&pageSize=10`,
method: 'get',
}
);
setVehicleData(old => [...old, ...result.data.data]);
};
fetchData();
}, [page]);
Так же, как вы делаете это с «нормальным» состоянием в компонентах класса React.
пример:
function App() {
const [state, setState] = useState([]);
return (
<div>
<p>You clicked {state.join(" and ")}</p>
//destructuring
<button onClick={() => setState([...state, "again"])}>Click me</button>
//old way
<button onClick={() => setState(state.concat("again"))}>Click me</button>
</div>
);
}
// Save search term state to React Hooks with spread operator and wrapper function
// Using .concat(), no wrapper function (not recommended)
setSearches(searches.concat(query))
// Using .concat(), wrapper function (recommended)
setSearches(searches => searches.concat(query))
// Spread operator, no wrapper function (not recommended)
setSearches([...searches, query])
// Spread operator, wrapper function (recommended)
setSearches(searches => [...searches, query])
https://medium.com/javascript-in-plain-english/how-to-add-to-an-array-in-react-state-3d08ddb2e1dc
Наиболее рекомендуемый метод - совместное использование функции оболочки и оператора распространения. Например, если вы инициализировали состояние с именем name
, как это,
const [names, setNames] = useState([])
Вы можете нажать на этот массив следующим образом:
setNames(names => [...names, newName])
Надеюсь, это поможет.
setTheArray([...theArray, newElement]);
- самый простой ответ, но будьте осторожны с изменением элементов в theArray. Используйте глубокое клонирование элементов массива.
если вы хотите нажать после определенного индекса, вы можете сделать следующее:
const handleAddAfterIndex = index => {
setTheArray(oldItems => {
const copyItems = [...oldItems];
const finalItems = [];
for (let i = 0; i < copyItems.length; i += 1) {
if (i === index) {
finalItems.push(copyItems[i]);
finalItems.push(newItem);
} else {
finalItems.push(copyItems[i]);
}
}
return finalItems;
});
};
Я пробовал указанные выше методы для помещения объекта в массив объектов в useState, но при использовании TypeScript возникла следующая ошибка:
Введите 'TxBacklog [] | undefined 'должен иметь метод' Symbol.iterator ', который возвращает iterator.ts (2488)
Настройка tsconfig.json, по-видимому, была правильной:
{
"compilerOptions": {
"target": "es6",
"lib": [
"dom",
"dom.iterable",
"esnext",
"es6",
],
Этот обходной путь решил проблему (мой пример кода):
Интерфейс:
interface TxBacklog {
status: string,
txHash: string,
}
Переменная состояния:
const [txBacklog, setTxBacklog] = React.useState<TxBacklog[]>();
Вставляем новый объект в массив:
// Define new object to be added
const newTx = {
txHash: '0x368eb7269eb88ba86..',
status: 'pending'
};
// Push new object into array
(txBacklog)
? setTxBacklog(prevState => [ ...prevState!, newTx ])
: setTxBacklog([newTx]);