reactjs React功能组件更新属性更改

7rfyedvj 于 2022-12-22 发布在 React

关注(0)|答案(2)|浏览(175)

我用的是react-star套餐
第一个月
它有一个问题。我需要在状态改变时改变值。但是值没有改变
我正在修改 AJAX load.上的this.state.rating，并将this.rating的值设置为在提交时使用。

class CallUpdate extends Component<{ match: PropsWithRef<any> }> {
 state = {
        rating:0
    }
    rating = 0;

    componentDidMount = async () => {
        this.id = this.props.match.params.id;


        const userCall = await axios.get(`call/show/${this.id}`);

        const call: call= userCall.data.data;
        this.setState({
            rating: call.rating
        });
    }

    submit = async (e: SyntheticEvent) => {
        e.preventDefault();
        const formData = new FormData();
        formData.append('rating', this.rating);
        //const formHeaders['Content-Type'] = 'multipart/form-data';
        const config = {headers: {'Content-Type' :'multipart/form-data'}};
        await axios.post(`call/${this.id}/update`, formData,config);

    }
render() {
return (
<ReactStars
    count={5}
    value={this.state.rating}
    onChange={(rating) => {this.rating = rating}}
    size={24}
    activeColor="#ffd700"
/>
        );
    }
}

export default CallUpdate;
////
react-starts-component  I have added this function. it should be called on props change.

 function updateValue(value){
        if (value < 0 || value > count) {
            setCurrentValue(0);
        }
        else {
            setCurrentValue(value);
        }
    }

I tried changing the useEffect 
useEffect(() => {
        addClassNames();
        validateInitialValue(props.value, props.count);
        setStars(getStars(props.value));
        setConfig(props);
        createUniqueness();
        setIsUsingIcons(iconsUsed(props));
        setHalfStarAt(Math.floor(props.value));
        setHalfStarHidden(props.isHalf && props.value % 1 < 0.5);
    }, []);

to 

useEffect(() => {
        addClassNames();
        validateInitialValue(props.value, props.count);
        setStars(getStars(props.value));
        setConfig(props);
        createUniqueness();
        setIsUsingIcons(iconsUsed(props));
        setHalfStarAt(Math.floor(props.value));
        setHalfStarHidden(props.isHalf && props.value % 1 < 0.5);
    }, [props]);

但是在状态。评级变化时，它不会更新值。
如何更改代码以使其属性更改值？

reactjs

来源：https://stackoverflow.com/questions/68422447/react-functional-component-update-property-change

2条答案

按热度按时间

wwodge7n1#

这里的问题是您没有更新状态，而是更新了类的属性，这不会导致重新呈现，并且您正在使用lead，而componentDidMount中的call变量不存在。您应该使用状态变量来保存可能随时间变化并反映在UI中的数据。

class CallUpdate extends Component {
  state = {
    rating: 0
  };

  componentDidMount = async () => {
    const id = this.props.match.params.id;

    const userCall = await axios.get(`call/show/${this.id}`);

    const call: call = userCall.data.data;
    this.setState({
      rating: call.rating
    });
  };

  submit = async (e: SyntheticEvent) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("rating", this.rating);
    //const formHeaders['Content-Type'] = 'multipart/form-data';
    const config = { headers: { "Content-Type": "multipart/form-data" } };
    await axios.post(`call/${this.id}/update`, formData, config);
  };
  render() {
    return (
      <ReactStars
        count={5}
        value={this.state.rating}
        onChange={(rating) => this.setState({rating})}
        size={24}
        activeColor="#ffd700"
      />
    );
  }
}

赞(0）回复(0）举报 2022-12-22

wpx232ag2#