1

我Context用来将exerciseList数组变量传递给 2 个不同的组件，

ExerciseList组件和Exercise组件。

Exercise组件呈现单个练习，然后 ExerciseList组件导入并实现它。

但现在的问题是，当有更新时，t.ex 练习已被删除，所以ExerciseList应该重新渲染。

但除非我刷新页面，否则它不会发生。

这是我Context的

function ContextProvider(props) {
    const [ exerciseList, setExerciseList ] = useState([])

    useEffect(() => {
            axios.get('http://localhost:5000/exercises/')
            .then(response => {
                setExerciseList(response.data)
            })
            .catch(err => console.log(err))
    }, [])

    return (
        <Context.Provider value={{exerciseList,
                                  setExerciseList,
                                }}>
            {props.children}
        </Context.Provider>
    )
}

export { Context, ContextProvider }

我收到这样的exerciseListinExerciseList组件

export default function ExerciseList(){
    const { exerciseList } = useContext(Context)

    const exerciseData = exerciseList.map( exercise => (
        <Exercise key={exercise._id} 
                  id={exercise._id}
                  username={exercise.username} 
                  description={exercise.description} 
                  duration={exercise.duration}
                  date={exercise.date}
        />
    ))

    return(
        <div>
            <h3>Exercise List</h3>
            <table className="exercise-table"> 
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Duration</th>
                        <th>Date</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {exerciseData}
                </tbody>
            </table>
        </div>
    )
}

Exercise我有功能的组件delete是这样的

export default function Exercise({id, username, description, duration, date}) {
    const { setExerciseList } = useContext(Context)

    const deleteExercise = (id) => {
        axios.delete('http://localhost:5000/exercises/' + id)
            .then(res => console.log(res.data))
            .catch(err => console.log(err))

        setExerciseList(exercises => exercises.filter(exercise => exercise.id !== id))    
    }

    return (
        <tr>
           <td>{username}</td>
           <td>{description}</td>
           <td>{duration}</td>
           <td>{date}</td>
           <td>
                <Link to={"/edit/" + id}>edit</Link> | <button onClick={() => deleteExercise(id)}>delete</button>
           </td>
        </tr>
    )
}

我想知道为什么？我将console.log(exerciseList.length > 0)ExerciseList组件放入，看看它是否捕捉到数组的变化，它没有。

帮助！

4

1 回答 1

1

你把console.log(exerciseList.length > 0)练习列表放在哪里了？如果你把它放在上面，exerciseList.map那么你应该会看到一些日志。

这可能是您遇到的问题。

setStatefromuseState与this.setState类组件中的不同。

它不接受函数作为参数。

所以setExerciseList应该是这样的

    const deleteExercise = (id) => {
        axios.delete('http://localhost:5000/exercises/' + id)
            .then(res => console.log(res.data))
            .catch(err => console.log(err))

        // setExerciseList(exercises => exercises.filter(exercise => exercise.id !== id))  
        setExerciseList(exercises.filter(exercise => exercise.id !== id))    
    }

注意：您应该确保axios.delete在删除 UI 中的项目之前正确执行。例如，将 移动setExerciseList到.then回调内部并给它一些更新状态。

于 2020-05-12T20:08:44.160 回答