1 
export class Register extends Component {
 render() {
    const [selectedGoal, setSelectedGoal] = React.useState(1);
 return (

<RadioButtonRN
                boxStyle={{
                  height: hp("6%"),
                  width: wp("80%"),
                }}
                activeColor="white"
                boxActiveBgColor="red"
                textColor="black"
                textStyle={{ fontWeight: "bold" }}
                data={goal}
                initial={selectedGoal}
                selectedBtn={(e) => setSelectedGoal(e.id)}
              />
{selectedGoal == 1 ? (
              <View style={{ alignItems: "center" }}>
                <Text style={{ color: "red", fontSize: 15, top: hp("5%") }}>
                  How much would you like to gain per week?
                </Text>
                <RadioButtonRN
                  style={{ top: hp("10%") }}
                  boxStyle={{
                    height: hp("6%"),
                    width: wp("80%"),
                  }}
                  activeColor="white"
                  boxActiveBgColor="red"
                  textColor="black"
                  textStyle={{ fontWeight: "bold" }}
                  data={details}
                  selectedBtn={(e) => console.log(e)}
                />
              </View>
            ) : selectedGoal == 2 ? (
              <View>
                <Text>Ciao</Text>
              </View>
            ) : (
              <View>
                <Text> you made it</Text>
              </View>
            )})}

大家好，我是编程新手，我尝试在 render() 下使用 const，然后在 RadioButtonRN 中使用它，但当然，它给了我一个无效的挂钩调用，我怎样才能将它转换为在我的类中工作?

4

3 回答 3

1

我可以看到 2 个问题

1-当组件返回多个元素时应使用片段，例如使用

<React.Fragment></React.Fragment>

或者

<></>

阅读以下链接了解更多信息：

https://reactjs.org/docs/fragments.html

2-您只能在功能组件上使用反应钩子！

将您的代码更改为：

import React from "react";
export const Register = () => {
  const [selectedGoal, setSelectedGoal] = React.useState(1);
  return (
    <>
      <RadioButtonRN
        boxStyle={{
          height: hp("6%"),
          width: wp("80%"),
        }}
        activeColor="white"
        boxActiveBgColor="red"
        textColor="black"
        textStyle={{ fontWeight: "bold" }}
        data={goal}
        initial={selectedGoal}
        selectedBtn={(e) => setSelectedGoal(e.id)}
      />
      {selectedGoal == 1 ? (
        <View style={{ alignItems: "center" }}>
          <Text style={{ color: "red", fontSize: 15, top: hp("5%") }}>
            How much would you like to gain per week?
          </Text>
          <RadioButtonRN
            style={{ top: hp("10%") }}
            boxStyle={{
              height: hp("6%"),
              width: wp("80%"),
            }}
            activeColor="white"
            boxActiveBgColor="red"
            textColor="black"
            textStyle={{ fontWeight: "bold" }}
            data={details}
            selectedBtn={(e) => console.log(e)}
          />
        </View>
      ) : selectedGoal == 2 ? (
        <View>
          <Text>Ciao</Text>
        </View>
      ) : (
        <View>
          <Text> you made it</Text>
        </View>
      )}
    </>
  );
};
于 2021-03-01T15:59:27.010 回答
0

您正在使用class带有反应钩子的组件。钩子仅适用于功能组件，但在这里您使用的是类。您可以在文档中阅读更多相关信息。 功能组件示例

export default function Register() {
 const [selectedGoal, setSelectedGoal] = React.useState(1);

 return <div>{selectedGoal</div>
}
于 2021-03-01T15:03:54.513 回答
0

不要hooks与 React 类一起使用。如果您使用类构建您的组件，则使用state. 钩子设计用于stateless组件。

看这里： https ://www.w3schools.com/react/react_state.asp

反应类状态：

class Someclass extends React.Component {
  constructor() {
    this.state = {
        state_one: 1,
        state_two: 'asd'
    };
  }
  render() {
    return (
      <div>
        {this.state.state_one} // <- usage
      </div>
    );
  }
}

请注意，您可以this.state.some_state这样更改：

this.setState({some_state: 'new_state'})

// or with using previous state:

this.setState({some_state: this.state.some_state + 1})

！！！注意{}在this.setState()

于 2021-03-01T15:04:16.167 回答