来自React JS中的props dict的SetState？

Question

I am new to reactjs and I am stuck on solving a problem, set a state from props dictionary. My code looks like this:

this.state = {
    test: []
}
render() {
  this.props.data.map(function(item, key){
  this.setState({ test: data.name})
})
}

Is not working, does anyone have any ideas of how to do it. Thanks I've been doing some changes:

componentDidMount() {
     this.state.userData.then(data => this.props.getData(data.user["data"]). then(test => this.setState(test.test.map(item => item.name))))}

Still the state.test is empty.

Answer 1

You can't set a state in the render function, this will cause an infinite loop.

The correct way

constructor(props){
  super(props)

  this.state = {
    test: props.data.map(item => item.name)
  }
}

render(){
  return (
    {this.state.test.map(item => {
      return (
        <p>{item}</p>
      )
    })}
  )
}

Answer 2

Try following this pattern will help you write clean code.

Also as can be seen that i have put the props directly within the constructor because it may be the case where the props are directly available to the component.

in case you want to make request and then after inject the props u can handle the same in the componentWillReciveProps or some Hooks method if your using react hooks

import React ,{Component,Fragment} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  constructor(props){
    super(props)
    this.state ={
      //This can be done if the prop is props are available before component renders  
      test: this.props.data||[1,2,3,4]
    }
  }

  render(){
    let  {test} = this.state
    return(
      <Fragment>
        {test.map((it,i) => <div key={i} >{it}</div>)}
      </Fragment>
    )
  }


}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);