当前位置: 首页 > 知识库问答 >
问题:

不变冲突:对象作为React子对象无效(React Native)

颜文康
2023-03-14

我试图实现一个简单的功能onPress的一个按钮,它应该添加place eName放置数组并显示在视图中,但我似乎得到了一个错误,请帮助

这是我的代码,

export default class App extends Component{

  state = {
    placeName: "",
    places: []
  }

  onChangeName = (val) => {
    this.setState({
      placeName: val
    })
  }

  placeSubmitHandler = () => {
    if(this.state.placeName === "") {
      alert('enter something');
    } else {
      this.setState(prevState => {
        return {
          places: prevState.places.concat(prevState.placeName)
        }
      })
    }
  }

  render() {
    const placesOutput = this.state.places.map((place, i) => (
        <Text key={i}>{place}</Text>
    ));
    return (
      <View style={styles.container}>
        <View style={styles.inputContainer}>
            <TextInput 
            style={{width: 300}}
            value={this.state.textInput}
            placeholder='enter anything'
            onChange={this.onChangeName}
            style={styles.placeInput}
            />
            <Button title='Add' style={styles.placeButton} onPress={this.placeSubmitHandler}/>
        </View>
        <View>
          {placesOutput}
        </View>
      </View>
    );
  }
}

这是我得到的错误,

Invariant Violation: Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, _dispatchListeners, _dispatchInstances, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, nativeEvent, isDefaultPrevented, isPropagationStopped}). If you meant to render a collection of children, use an array instead.
    in RCTText (at Text.js:154)
    in TouchableText (at Text.js:278)
    in Text (at App.js:48)
    in RCTView (at View.js:45)
    in View (at App.js:62)
    in RCTView (at View.js:45)
    in View (at App.js:51)
    in App (at renderApplication.js:35)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:34)

我是个新来的土生土长的人,所以我对此一无所知。

共有2个答案

洪照
2023-03-14

你的place输出变量返回一个jsx形式的对象。

而不是

const placesOutput = this.state.places.map((place, i) => (
        <Text key={i}>{place}</Text>
         ));

试试看

const placesOutput = this.state.places.map((place, i) => (
        <Text key={i}>{place.name} /* place is an object use any property of it. */</Text>
    ));
左丘宜年
2023-03-14

在您的

  <TextInput
    style={styles.placeInput}
    value={this.state.textInput}
    placeholder="enter anything"
    onChangeText={this.onChangeName}
  />

还要注意,您正在复制它的style属性。统一它们或将它们作为数组传递

style={[styles.placeInput, {width: 300}]}

 类似资料:
  • 在组件的呈现函数中,我有: 所有内容都显示良好,但单击 元素时,我会收到以下错误: 未捕获得错误:不变冲突:对象作为React子级无效(找到:具有键得对象{dispatchConfig,dispatchMarker,nativeEvent,target,currentTarget,type,eventPhase,bubbles,cancelable,timeStamp,defaultPrevent

  • 我有以下代码: 但我得到了以下错误: 未捕获的不变违规:对象作为React子对象无效(找到:带有键{正文、附件、视频、主题、updated_at、id、主题、反对票、作者、posted_at、注释、user_vote、好评、状态、标签、位置、track_impact、user_is_following、comments_count}的对象)。如果要呈现子集,请使用数组来代替,或者使用React加载

  • 我正在React中制作一个RecipeBox应用程序,在我尝试实现搜索功能之前,它运行良好。一旦用户在搜索栏中输入搜索项,就会抛出错误。此方法中的块抛出错误- 这是错误消息- 控制台显示- 这表明是一个包含对象的数组。但是会抛出错误- 有趣的是,如果我删除搜索栏功能并完全删除else块,相同的语句就可以正常工作,不会抛出任何错误- 这是我在Codepen上的应用程序。 复制步骤- 在搜索栏中搜索现

  • 问题内容: 请帮我。我不知道为什么这段代码不起作用。 它给我一个错误:“对象作为React子对象无效(找到:带有键{itemss}的对象)。如果要渲染子对象的集合,请改用数组。” 为什么{i.title}是对象。这只是一个字符串。我怎样才能解决这个问题?以及实际上如何迭代嵌套对象? 问题答案: 问题是因为你回来了 这是的等效即 您将返回具有键和的对象。你可以写 要么 要么 PS请注意,前两种方法将

  • 问题内容: 我正在尝试使用用户代理将json设置为一种状态,但出现错误: 未捕获的不变违规:对象作为React子对象无效(找到:具有键{…}的对象)。如果您打算渲染孩子的集合,请使用数组代替,或者使用React附加组件中的createFragment(object)包装对象。 设置状态的方法: 服务 杰森 问题答案: 您无法执行此操作:由于您的错误提示您尝试执行的操作无效。您正在尝试将整个数组呈现

  • 问题内容: 我正在尝试通过数组映射来呈现帖子列表。我已经做过很多次了,但有一些 我得到的是: 未捕获的错误:对象作为React子对象无效(找到:[object Promise])。如果要渲染子级集合,请改用数组。 我检查了renderPosts返回的数据,它是一个具有正确值且没有承诺的数组。这里发生了什么? 问题答案: 将返回非实际数据,并且AFAIK Reactjs将不会在中隐式解析Promis