Question

我有一个自定义组件，我想显示从选择对话框中选择的项目列表。但是，当用户选择项目列表时，没有任何显示。我正在使用useState和createContext。

const GetList = () => {
        console.log(list)
        return(list);
    }

我正在输出应为列表的内容，并尝试将其返回给组件。当我通过同一console.log()内的另一个函数运行列表时，createContext会按照我的期望输出列表

const SetId = (x) => {
        console.log(x);
        GetId().length===0?(initId = x):(SetListId(x));
        FillList();
        GetList()
    }

但是当我在自定义组件中调用它时，它不起作用。当组件最初呈现时，我得到了一个初始字母，但随后它不再运行，正如我期望的那样。

import {ListContext} from '../context/ListContext';
export const List = () => {
const {GetList} = useContext(ListContext);
const xx = GetList();
console.log(xx);

以下是上下文，自定义组件以及该组件之前的选择框的完整代码。 上下文

import React, {useState, createContext} from 'react';
import groceryLists from '../data/groceryLists.json';

export const ListContext = createContext();

export const GroceryListProvider =(props) => {
    const [listId, SetListId] = useState([]);
    const [list, SetList] = useState([]);
    let initId = 0;

    const SetId = (x) => {
        GetId().length===0?(initId = x):(SetListId(x));
        FillList();
        GetList()
    }
    const GetId =()=>{
        return(listId);
    }
    const FillList = () => {
        let id = 0;
        GetId().length===0?(id = initId):(id=GetId());
        groceryLists.forEach(lists=>
            lists.listId===parseInt(id)?
            (lists.items.forEach(product=>SetList(currentList=>[...currentList,product]))):(null)
            )
    }
    const GetList = () => {
        console.log(list)
        return(list);
    }
    return (
        <ListContext.Provider value={{listId,list,SetId,GetId,SetList,GetList}}>
        {props.children}
        </ListContext.Provider>
    )
}

自定义组件

import React,{useContext} from 'react';
import {Search} from './SearchList';
import {ListContext} from '../context/ListContext';

export const List = () => {
const {GetList} = useContext(ListContext);
const xx = GetList();
console.log(xx);

    return(
        <div className='listControl'>
            <p>Work</p>
            <ul>
            {xx.map(items=>console.log(items))}
            </ul>
        </div>)
}

<ul>内的地图仅是一个占位符，因为它将最终输出列表项中的<li>。

我仍在尝试学习，并通过自己的项目来体验React.js的方式。因此，我确定我会丢失一些东西，因此任何建议或建议都将不胜感激。
预先感谢

React组件无法更新

0 个答案: