increment/decrement 点击组件。如何将数据保存到db.json?
increment/decrement click component. How to save data to db.json?
我得到了一个可以递增或递减数字的 React 功能组件。
加载页面后,我希望从 JSON-SERVER 的 db.json 文件中读取此数字并显示在我的视图中。当我增加或减少页面中的值时,我还想更新 db.json 文件中的数字。
我尝试 console.log 来自 db.json 的数据,我看到 console.log 在我的控制台中显示了 2 次:
- 第一次空[]
- 第二次就好了[{"clicks":20,"id":1},{"clicks":50,"id":2}]
到目前为止我尝试的是使用 { clicked[0].clicks } 显示点击值
但是“.clicks”导致我出现未定义的错误...
我做错了什么?感谢您的帮助!
const CountClick = (props) => {
const componentTitle = 'Count Click Component';
const [clicked, setClicked] = useState([]);
useEffect(() => {
const fetchData = async () => {
const result = await axios(
'http://localhost:4000/clicked'
);
setClicked(result.data);
};
fetchData();
},[]);
console.log('clicked array', JSON.stringify(clicked));
return (
<div>
<span className="result">Counter value: { clicked.clicks }</span>
<button onClick={ () => {setClicked(clicked.clicks + 1);saveClicks(clicked.clicks + 1)} }>+1</button>
<button onClick={ () => {setClicked(clicked.clicks - 1);saveClicks(clicked.clicks - 1)} }>+1</button>
</div>
);
除了在我的视图中显示 "clicks" 值
假设保存和加载功能正常工作是对显示的简单检查,您可以使用 lodash isEmpty 之类的东西,或者如果超过 1 个项目显示计数则检查数组的长度。
IsEmpty(已点击)?正在加载:点击[0].点击
UseEffect 的工作方式与挂载组件的方式类似。数据在组件呈现到屏幕后加载,因此此时您点击的值为空并且无法显示点击,也就是未定义
我得到了一个可以递增或递减数字的 React 功能组件。 加载页面后,我希望从 JSON-SERVER 的 db.json 文件中读取此数字并显示在我的视图中。当我增加或减少页面中的值时,我还想更新 db.json 文件中的数字。
我尝试 console.log 来自 db.json 的数据,我看到 console.log 在我的控制台中显示了 2 次:
- 第一次空[]
- 第二次就好了[{"clicks":20,"id":1},{"clicks":50,"id":2}]
到目前为止我尝试的是使用 { clicked[0].clicks } 显示点击值 但是“.clicks”导致我出现未定义的错误...
我做错了什么?感谢您的帮助!
const CountClick = (props) => {
const componentTitle = 'Count Click Component';
const [clicked, setClicked] = useState([]);
useEffect(() => {
const fetchData = async () => {
const result = await axios(
'http://localhost:4000/clicked'
);
setClicked(result.data);
};
fetchData();
},[]);
console.log('clicked array', JSON.stringify(clicked));
return (
<div>
<span className="result">Counter value: { clicked.clicks }</span>
<button onClick={ () => {setClicked(clicked.clicks + 1);saveClicks(clicked.clicks + 1)} }>+1</button>
<button onClick={ () => {setClicked(clicked.clicks - 1);saveClicks(clicked.clicks - 1)} }>+1</button>
</div>
);
除了在我的视图中显示 "clicks" 值
假设保存和加载功能正常工作是对显示的简单检查,您可以使用 lodash isEmpty 之类的东西,或者如果超过 1 个项目显示计数则检查数组的长度。
IsEmpty(已点击)?正在加载:点击[0].点击
UseEffect 的工作方式与挂载组件的方式类似。数据在组件呈现到屏幕后加载,因此此时您点击的值为空并且无法显示点击,也就是未定义