setState 不是一个函数 - 尝试使用按钮 id setState 以在 useParams 中用于页面导航

Question

我正在尝试在单击 id 后更新按钮的状态。然后将此 id 存储在状态中，以便可以将其作为参数传递以导航到与单击的按钮具有相同 id 的页面。

不幸的是，我不断收到“TypeError：setSimulation 不是函数”。

我还有一个 useContext 状态管理，它也返回这个。

模拟器.json

    [ { 'id': 1, 'name':'John', 'age':39, 'occupation':'Plumber'}, { 'id': 2, 'name':'Lisa', 'age':22, 'occupation':'Dentist'}, { 'id': 3, 'name':'Alex', 'age':54, 'occupation':'Typewriter'}, ]

这是我显示按钮的地方。

SimulatorPage.js

        import SimulatorList from '../../Assets/JSON/SimulatorList.json'
        import { useState, useEffect} from 'react';
        import {NavLink, useNavigate } from 'react-router-dom';


        const SimulatorPage = () => {

        const [simulation, setSimulation]= useState({})
   
        // This is the function that navigates user to the specific page 
            const navigate = useNavigate()

            const navigateToSimulatorTable = (id) => {
            setSimulation(id)
            console.log(id);
            navigate(`/simulator-more-info/${id}`)
            }




           return (
                <div className='buttonBlock'>
                        {
                            SimulatorList.map((item, index) => {
                                const { id,name } = item
                                return (
                                    <>
                                        <button id={item.id} key={index} 
                                  
                                        onClick={()=>navigateToSimulatorTable(item.id)}
                                        >
                                            
                                                {item.id}
                                                {item.name}
                                          
                                        <button>
                    </div>
                    )}

                export default SimulatorPage
``

This is the second page that takes the id that has been clicked from the button as shows more information about each person

SimulatorInformation.js

`
import SimulatorList from '../../Assets/JSON/SimulatorList.json'
import {useState, useEffect} from 'react'
import { useParams } from 'react-router-dom';


const SimulatorInformation = () => {
 
const [moreInfo, setMoreInfo] = useState({})

const {id} = useParams();

 useEffect(() => {
    fetch(`/simulator-more-info/${id}`)
          .then((res) => res.json())
      .then((data) => setMoreInfo(data));
   }, []);

 
    return (
        <div>
            <div className='renderTableDiv'>
                <table className='renderTable'>
                    
                    <tr className='tableInfo'>
                        <th>Name</th>
                        <th className='rightColumnSimulator'>{moreInfo.name}</th> 

                    </tr>
                    <tr className='tableInfo'>
                        <th>Age</th>
                       <th className='rightColumnSimulator'>{moreInfo.age}</th> 
                        
                    </tr>
                    <tr className='tableInfo'>
                        <th>Occupation</th>
                       <th className='rightColumnSimulator'>{moreInfo.occupation}</th> 
                        

                    </tr>
                </table>
            </div>

        </div>
    )
}

export default SimulatorInformation`

At the moment, I am able to go to the page with correct id, but unable to setSimulation state so that I can use it in the SimulatorInformation.js page. I also had a thought to lift the state, however I was recieving the same error.

Answer 1

您已将模拟统计数据指定为对象，但使用 setSimulation 将其指定为字符串。因为你只需要一个id，将useState类型更改为string

    const SimulatorPage = () => {

    const [simulation, setSimulation]= useState('')

    // This is the function that navigates user to the specific page 
        const navigate = useNavigate()

        const navigateToSimulatorTable = (id) => {
        setSimulation(id)
        console.log(id);
        navigate(`/simulator-more-info/${id}`)
        }

Answer 2

const [simulation, setSimulation]= useState({})

这是您的代码，您首先初始化了空对象，但后来您尝试使用 id 更新它。

常量navigateToSimulatorTable =（id）=> { 设置模拟（id） 控制台.log(id); 导航(

/simulator-more-info/${id}

) }

我认为这不应该是这样的..