Question

我正在尝试将钩子集成到旧的一页React应用程序中。首先，我将父组件（类）替换为功能组件。

我的一页应用程序有3个部分。
我在页面顶部有一个菜单，其中包含4个部分，该菜单允许自动滚动到目标部分。

问题：当我单击项目菜单时，我已经“未捕获的TypeError：无法读取未定义的属性'1'”

1-当我的应用程序正在安装时，我调用firebase并将数据设置为状态：

export const App = () => {

const [datas, setDatas] = useState([]);

// FIREBASE ------------------------------------ //
useEffect(() => {
    const datas = base.syncState('/data', {
      context: {
        setState: ({ datas }) => setDatas({ ...datas }),
        state: { datas },
      },
      state: 'datas'
    })

    return () => {
      base.removeBinding(datas);
    }
  }, []) 

// USED TO MANAGE THE ACTIVE SECTION ----------- //
const toggleClassActive = (key) => {
    Object.keys(datas[0].itemsMenu).map(key => datas[0].itemsMenu[key].active = false)
    datas[0].itemsMenu[key].active = true
    setDatas(datas[0].itemsMenu)
}

return (
    <div className="container">
        <Menu itemsMenuAction={toggleClassActive}></Menu>
        <Section id="section1" sectionObj={datas[0].sections[1] ? datas[0].sections[1] : "" } />
        <Section id="section2" sectionObj={datas[0].sections[2] ? datas[0].sections[2] : "" } />
        <Section id="section3" sectionObj={datas[0].sections[3] ? datas[0].sections[3] : "" } />
    </div>
)

2- <Menu>组件代码是一个类，我尚未通过功能组件进行更改。我只是更改了父组件。

class Menu extends Component {

    render() {

        const { itemsMenuAction, --otherProps--} = this.props

        return (
          <div className="main-menu">
            <ul className={openClassState ? 'list-item-menu open' : 'list-item-menu'}>
              {
                Object.keys(itemsMenuState)
                .map(key =>
                  <li className={itemsMenuState[key].active ? 'item-menu active' : 'item-menu'}
                    onClick={ () => itemsMenuAction(key)}
                    key={key}>
                    {itemsMenuState[key].label+"."}
                  </li>
                )
              }

            </ul>
            <div className={openClassState ? "btn-menu open" : "btn-menu"} onClick={openMenuAction}>
              <nav>
                <a href="#" className="menu">
                  <div className="menu--text">
                    <span data-hover>Menu</span>
                    <span data-close>Fermer</span>
                  </div>
                </a>
              </nav>
            </div>
          </div>
        )
    }
}
}

export default Menu

3-我的json数据：

{
  "data" : [{
    "itemsMenu" : [ {
      "active" : false,
      "label" : "Accueil"
    }, {
      "active" : true,
      "label" : "Services"
    }, {
      "active" : false,
      "label" : "Savoir-Faire"
    }, {
      "active" : false,
      "label" : "Localisation"
    }, {
      "active" : false,
      "label" : "contact"
    } ],
    "sections" : [ {
      "admin" : {
        "content" : "Section 0 - pette",
        "title" : "Services"
      },
      "tech" : {
        "class" : "section-0",
        "parallax" : false
      }
    }, {
      "admin" : {
        "content" : "Section 1 - TEST",
        "title" : "Section 1 - Titre"
      },
      "tech" : {
        "class" : "section-1",
        "parallax" : false
      }
    }, {
      "admin" : {
        "content" : "Section 2 - Content",
        "title" : "Section 2 - Titre"
      },
      "tech" : {
        "class" : "section-2",
        "parallax" : false
      }
    }, {
      "admin" : {
        "content" : "Section 3 - Content",
        "title" : "Section 3 - Titre"
      },
      "tech" : {
        "class" : "section-3",
        "parallax" : false
      }
    } ]
  }]
}

错误屏幕截图：

enter image description here

Answer 1

尝试：

<div className="container">
        <Menu itemsMenuAction={toggleClassActive}></Menu>
        <Section id="section1" sectionObj={datas.length ? datas[0].sections[1] : "" } />
        <Section id="section2" sectionObj={datas.length  ? datas[0].sections[2] : "" } />
        <Section id="section3" sectionObj={datas.length  ? datas[0].sections[3] : "" } />
    </div>

Answer 2

这是一个愚蠢的错误：

#define _CRT_SECURE_NO_DEPRECATE
#include <stdio.h>
#include <iostream>
#include <string>
#include <fstream>

using namespace std;
using std::string;
using std::fstream;

typedef struct  WAV_HEADER {
    char                RIFF[4];
    unsigned long       ChunkSize;
    char                WAVE[4];
    char                fmt[4];
    unsigned long       Subchunk1Size;
    unsigned short      AudioFormat;
    unsigned short      NumOfChan;
    unsigned long       SamplesPerSec;
    unsigned long       bytesPerSec;
    unsigned short      blockAlign;
    unsigned short      bitsPerSample;
    char                Subchunk2ID[4];
    unsigned long       Subchunk2Size;

} wav_hdr;

int headerSize = 0;
string path = "file.wav";
wav_hdr wavHeader;

FILE* openFile() {
    const char* filePath;
    FILE *wavFile;

    headerSize = sizeof(wav_hdr);
    filePath = path.c_str();
    wavFile = fopen(filePath, "rb");

    if (wavFile == NULL) {
        printf("Error\n");
    }

    fread(&wavHeader, headerSize, 1, wavFile);

    return wavFile;
}

int8_t MuLaw_Encode(int16_t number)
{
    const uint16_t MULAW_MAX = 0x1FFF;
    const uint16_t MULAW_BIAS = 33;
    uint16_t mask = 0x1000;
    uint8_t sign = 0;
    uint8_t position = 12;
    uint8_t lsb = 0;
    if (number < 0)
    {
        number = -number;
        sign = 0x80;
    }
    number += MULAW_BIAS;
    if (number > MULAW_MAX)
    {
        number = MULAW_MAX;
    }
    for (; ((number & mask) != mask && position >= 5); mask >>= 1, position--)
        ;
    lsb = (number >> (position - 4)) & 0x0f;
    return (~(sign | ((position - 5) << 4) | lsb));
}

int fileSize(FILE *file) {
    int fileSize = 0;

    fseek(file, 0, SEEK_END);
    fileSize = ftell(file);
    fseek(file, 0, SEEK_SET);

    return fileSize;
}

double bitsPerSample() {
    double bitsPerE;

    bitsPerE = wavHeader.bitsPerSample;
    return bitsPerE;
}

int main() {
    FILE *wavFile;
    wavFile = openFile();
    FILE* fptr2;
    fptr2 = fopen("file2.wav", "wb");

    int samples_count = fileSize(wavFile) / bitsPerSample();
    short int *value = new short int[samples_count];

    for (int16_t i = 0; i < samples_count; i++)
    {
        fread(&value[i], samples_count, 1, wavFile);
        cout << value[i] << " "; // the output is in the attached picture
        MuLaw_Encode(value[i]);
    }
        fwrite(value, sizeof(char), samples_count, fptr2);

    return 0;
}

-> setDatas（数据） !!!

为什么在onClick之后我的状态不确定？ [Hook，React]

2 个答案: