当我单击按钮时，处理程序将运行，但是需要再次单击才能将状态值实际推入数组：
这是我的总代码，其中包含我尝试过的内容：
var assets = []
// Add to this array
assets.push(house_location + " " + "Cost" + " " + cost + " " + "Downpay"+ " " + downpay)
// Access a particular element eg. first
assets[0]
// Check if already have a house
assets.length > 0
因此，我尝试过类似的方法，乍一看似乎很适合...
但随后我得到：import { Button, Header, Message, Table, TextArea } from 'semantic-ui-react';
import React, { useState, useEffect, useCallback } from 'react';
export default function Day({ dayInfo }) {
var [dayInfoInChild, setDayInfoInChild] = useState({});
var [currentDate, setCurrentDate] = useState('');
var [amountOfRows, setAmountOfRows] = useState(24);
var [textValue, setTextValue] = useState('');
var [textValueContainer, setTextValueContainer] = useState([]);
function handleChange(e) {
e.persist();
setTextValue(e.target.value);
}
function handleClick(e, timeOfDayAndHour) {
e.persist();
e.preventDefault();
setTextValueContainer((textValueContainer) => [
...textValueContainer,
textValue, /* <==== This should be adding from handleChange i.e. e.target.value into textContainer */
]);
setDayInfoInChild({
...dayInfoInChild,
[currentDate]: {
[timeOfDayAndHour]: {
message: textValueContainer,
},
},
});
}
useEffect(() => {
if (dayInfo !== null) {
var modifiedDayInfo = dayInfo
.split(' ')
.map((item) => {
if (item.indexOf(',')) return item.replace(/,/g, '');
})
.join('-');
setCurrentDate(modifiedDayInfo);
if (localStorage.getItem(modifiedDayInfo)) {
var stringVersionOfModifiedDayInfo = modifiedDayInfo;
modifiedDayInfo = JSON.parse(localStorage.getItem(modifiedDayInfo));
if (!dayInfoInChild.hasOwnProperty(stringVersionOfModifiedDayInfo)) {
setDayInfoInChild({
...dayInfoInChild,
[stringVersionOfModifiedDayInfo]: modifiedDayInfo,
});
}
} else {
localStorage.setItem(modifiedDayInfo, JSON.stringify({}));
}
}
}, [dayInfo]);
useEffect(() => {
return () => textValue; Because this value could change many times shouldn't this be correct?
}, [textValue]);
return (
<>
<h1>{dayInfo}</h1>
<Table celled structured>
<Table.Body>
{Array.from(Array(amountOfRows)).map((row, index) => {
return (
<React.Fragment key={index}>
<Table.Row>
<Table.Cell rowSpan="2" style={tableStyle}>
{TimeOfDaySetter(index)}
</Table.Cell>
<Table.Cell style={tableStyle}>
{
<strong>
{setExactHourHelper(index)}
:00
</strong>
}
<Message>
<Message.Header>Form data:</Message.Header>
</Message>
<TextArea
rows={2}
name="textarea"
onChange={(e) => handleChange(e)}
placeholder="Tell us more"
/>
<Button
fluid
attached="bottom"
content="submit"
onClick={(e) => {
handleClick(
e,
`${setExactHourHelper(index)}-${
index < 12 ? 'AM' : 'PM'
}`
);
}}
/>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell style={(tableStyle, colorOveride)}>
{
<strong>
{setExactHourHelper(index)}
:30
</strong>
}
<Message>
<Message.Header>Form data:</Message.Header>
<pre></pre>
</Message>
<TextArea
rows={2}
name="textarea"
onChange={(e) => handleChange(e)}
placeholder="Tell us more"
/>
<Button
fluid
attached="bottom"
content="submit"
onClick={handleClick}
// onKeyPress={this.handleKeyPress}
/>
</Table.Cell>
</Table.Row>
</React.Fragment>
);
})}
</Table.Body>
</Table>
</>
);
}
TypeError: e.persist is not a function任何帮助将不胜感激！
更新
这是我的代码codesandbox的链接...