我正在用 react.Js 开发一个应用程序
而且我有一个表格，我需要更新而无需刷新页面。
代码：
const App = () => {
const [item, setItem] = useState([])
const [category, setCategory] = useState([])
const categories = category.map(elem => ({
value: elem.id,
label: elem.cat,
}));
const [category_select, setCategorySelect] = React.useState(null);
function handleChangeCategory(value) {
setCategorySelect(value);
}
useEffect(() => {
getItems()
}, [])
useEffect(() => {
getCategories()
}, [])
const getItems = async () => {
const response = await axios.get(REQUEST_1)
setItem(response.data)
}
const getCategories = async () => {
const response = await axios.get(REQUEST_2)
setCategory(response.data)
}
const addItems = () => {
axios.post(`${REQUEST_1}`, {cat: category_select.value});
};
const body = () => {
return item && item.map((elem,j) => {
return (
<tr key={elem.id}>
<td><span>{elem.cat}</span></td>
</tr>
)
})
}
return (
<>
<div>
<div>
<div>
<div>
<NoSsr>
<Select
classes={classes}
styles={selectStyles}
inputId="category"
TextFieldProps={{
label: 'Category',
InputLabelProps: {
htmlFor: 'category',
shrink: true,
},
placeholder: 'Search',
}}
options={categories}
components={components}
value={category}
onChange={handleChangeCategory}
/>
</NoSsr>
<span>Select</span>
</div>
<div>
<label> </label>
<span onClick={addItems}></span>
</div>
</div>
<div>
<div>
<div>
<table>
<thead>
<tr>
<th>
<span>Category</span>
</th>
</tr>
</thead>
<tbody>
{body()}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</>
)
}
export default App;
这个想法是选择一个类别并添加项目。
我需要的是能够在点击 return item && item.map((elem,j) => {...}) 后更新地图 (<span onClick={addItems}></span>)，该 addItems 调用添加项目的 public class TestLogger extends LoggerFormat {
private static final DateTimeFormatter TIMESTAMP_FORMAT = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
private static final ZoneId DEFAULT_ZONE_ID = ZoneId.of(EnvConf.getDefaultTimeZone());
private final ThreadLocal<Map<String, List<String>>> testsLogMap = new ThreadLocal<>();
public void info(ITestContext context, String messageFormat, Object... args) {
String msg = handleFormatMsg(messageFormat, args);
super.info(msg);
log(Level.INFO, context, msg);
}
public void error(ITestContext context, Throwable t, String messageFormat, Object... args) {
String msg = handleFormatMsg(messageFormat, args);
super.error(msg, t);
log(Level.ERROR, context, msg, t);
}
public void error(ITestContext context, String messageFormat, Object... args) {
String msg = handleFormatMsg(messageFormat, args);
super.error(msg);
log(Level.ERROR, context, msg);
}
public void warn(ITestContext context, String messageFormat, Object... args) {
String msg = handleFormatMsg(messageFormat, args);
super.warn(msg);
log(Level.WARN, context, msg);
}
public void warn(ITestContext context, Throwable t, String messageFormat, Object... args) {
String msg = handleFormatMsg(messageFormat, args);
super.warn(msg, t);
log(Level.WARN, context, msg, t);
}
public void debug(ITestContext context, String messageFormat, Object... args) {
String msg = handleFormatMsg(messageFormat, args);
super.debug(msg);
if (LoggerFactory.isDebug()) {
log(Level.DEBUG, context, msg);
}
}
public void debug(ITestContext context, Throwable t, String messageFormat, Object... args) {
String msg = handleFormatMsg(messageFormat, args);
super.debug(msg, t);
if (LoggerFactory.isDebug()) {
log(Level.DEBUG, context, msg, t);
}
}
private void log(Level level, ITestContext context, Object message, Throwable t) {
message = String.format("%s\n%s", message, throwableToString(t));
log(level, context, message);
}
private void log(Level level, ITestContext context, Object message) {
Map<String, List<String>> logsMap = getLogsMap();
if (!logsMap.containsKey(context.getName())) {
logsMap.put(context.getName(), new ArrayList<>());
}
logsMap.get(context.getName()).add(formatMsg(message, level));
if (level.toInt() != Level.DEBUG.toInt()) {
Reporter.log((String) message, 0);
}
}
private static String formatMsg(Object message, Level level) {
LocalDateTime dateTime = LocalDateTime.now(DEFAULT_ZONE_ID);
return String.format("[%s][%s]%s",
TIMESTAMP_FORMAT.format(dateTime),
level, message);
}
public List<String> getAndDeleteLogsByTest(String testName) {
return getLogsMap().remove(testName);
}
private Map<String, List<String>> getLogsMap() {
if (testsLogMap.get() == null) {
testsLogMap.set(new HashMap<>());
}
return testsLogMap.get();
}
private static String throwableToString(Throwable t) {
StringBuilder builder = new StringBuilder();
for (StackTraceElement traceElement : t.getStackTrace()) {
builder.append(traceElement.toString()).append('\n');
}
return builder.toString();
}
private static String handleFormatMsg(String message, Object... args) {
if (args.length == 0 && message.contains("%")) {
message = message.replaceAll("%", "%%");
}
return String.format(message, args);
}
}
函数。简单地说，我需要将它添加到表中而无需更新。
我该怎么做，建议？
答案 0 :(得分：1)
您需要将依赖项添加到 useEffect，以便每次用户想要添加项目时，都会调用 getItems() 请求以获取新项目。因此，您的代码可能如下所示：
const App = () => {
const [item, setItem] = useState([])
const [category, setCategory] = useState([])
const [addedItem, setAddedItem] = useState('')
const categories = category.map(elem => ({
value: elem.id,
label: elem.cat,
}));
const [categorySelect, setCategorySelect] = React.useState(null);
function handleChangeCategory(value) {
setCategorySelect(value);
}
useEffect(() => {
getItems()
}, [addedItem])
useEffect(() => {
getCategories()
}, [])
const getItems = async () => {
const response = await axios.get(REQUEST_1)
setItem(response.data)
}
const getCategories = async () => {
const response = await axios.get(REQUEST_2)
setCategory(response.data)
}
const addItems = () => {
const response = await axios.post(`${REQUEST_1}`, {cat: category_select.value});
setAddedItem(response.data)
};
const body = () => {
return item && item.map((elem,j) => {
return (
<tr key={elem.id}>
<td><span>{elem.cat}</span></td>
</tr>
)
})
}
return (
<>
<div>
<div>
<div>
<div>
<NoSsr>
<Select
classes={classes}
styles={selectStyles}
inputId="category"
TextFieldProps={{
label: 'Category',
InputLabelProps: {
htmlFor: 'category',
shrink: true,
},
placeholder: 'Search',
}}
options={categories}
components={components}
value={category}
onChange={handleChangeCategory}
/>
</NoSsr>
<span>Select</span>
</div>
<div>
<label> </label>
<span onClick={addItems}></span>
</div>
</div>
<div>
<div>
<div>
<table>
<thead>
<tr>
<th>
<span>Category</span>
</th>
</tr>
</thead>
<tbody>
{body()}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</>
)
}
export default App;