increment/decrement 点击组件。如何将数据保存到db.json？

Question

我得到了一个可以递增或递减数字的 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" 值

Answer 1

假设保存和加载功能正常工作是对显示的简单检查，您可以使用 lodash isEmpty 之类的东西，或者如果超过 1 个项目显示计数则检查数组的长度。

IsEmpty（已点击）？正在加载：点击[0].点击

UseEffect 的工作方式与挂载组件的方式类似。数据在组件呈现到屏幕后加载，因此此时您点击的值为空并且无法显示点击，也就是未定义

increment/decrement 点击组件。如何将数据保存到db.json？

increment/decrement click component. How to save data to db.json?

reactjs

functional-programming

json-server