英文:
Updating react component
问题
我有这段代码：
let columnChooser = [productName]
function replacer (key: any) {
if (key == 1) {
message.info(`点击项目 ${key}`);
columnChooser.push(productPrice)
}
}
基本上，我想将 productPrice 添加到现有的数组中。使用这种方法在我的 React 返回中，我无法得到一个新的列 productPrice，我一直只有 productName。该函数来自下拉菜单，它获取键值，以便可以将适当的列添加到数组中。
有人能为我提供一些关于为什么这不起作用的见解吗？
在按下按钮后运行函数后，我期望新的值被添加到数组中并显示在前端。
英文:
I have this piece of code:
let columnChooser = [productName]
function replacer (key: any) {
if (key == 1) {
message.info(`Click on item ${key}`);
columnChooser.push(productPrice)
}
}
what I want basically is to add productPrice into the existing array. With this method in my react return Ido not get a new column productPrice, I constantly have only productName. the function is from the drop-down menu and it grabs key values so an appropriate column can be added to the array.
Can anyone provide me with some insight into why this is not working
after function is run via button press I expected that new value be added into array and shown in front end
答案1
得分: 1
我无法理解你的最终目标，但根据我理解，你想要在一个组件中更新数值。为此，你可以使用React Hooks的useState和按钮的点击事件。
示例：https://codesandbox.io/s/6vryxv96pz
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const App = () => {
const [value, setValue] = useState("");
const [list, setList] = useState(["a", "b", "c"]);
const onChangeValue = (event) => {
setValue(event.target.value);
};
const onAddItem = () => {
setList((prevState) => {
const updatedList = [...prevState, value];
return updatedList;
});
setValue("");
};
return (
<div>
<ul>
{list.map((item, i) => (
<li key={i}>
<div>{item}</div>
</li>
))}
</ul>
<input type="text" value={value} onChange={onChangeValue} />
<button type="button" onClick={onAddItem} disabled={!value}>
Add
</button>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
英文:
I couldn't quite understand your end goal, but from what I understand you want to update the value in a component. For that you can use the useState of React Hooks and the click event of the button.
example: https://codesandbox.io/s/6vryxv96pz
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const App = () => {
const [value, setValue] = useState("");
const [list, setList] = useState(["a", "b", "c"]);
const onChangeValue = (event) => {
setValue(event.target.value);
};
const onAddItem = () => {
setList((prevState) => {
const list = [...prevState, value];
return list;
});
setValue("");
};
return (
<div>
<ul>
{list.map((item, i) => (
<li key={i}>
<div>{item}</div>
</li>
))}
</ul>
<input type="text" value={value} onChange={onChangeValue} />
<button type="button" onClick={onAddItem} disabled={!value}>
Add
</button>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
答案2
得分: 1
在这种情况下，您需要使用useState。然后您的代码将如下所示：
// let columnChooser = [productName]
const [columnChooser, setColumnChooser] = useState([productName]);
function replacer(key: any) {
if (key == 1) {
message.info(`Click on item ${key}`);
setColumnChooser(prevState => [...prevState, productPrice]);
// columnChooser.push(productPrice)
}
}
英文:
in this case you need to use useState. Then your code would look like this:
// let columnChooser = [productName]
const [columnChooser, setColumnChooser] = useState ([productName]);
function replacer (key: any) {
if (key == 1) {
message.info(`Click on item ${key}`);
setColumnChooser(prevState => [...prevState, productPrice]);
// columnChooser.push(productPrice)
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论